CODEWITHSUNDEEP
csshtmlresponsive-design
lookingGlass
lookingGlass

Reputation: 365

Responsive Images using CSS background image

I am trying to figure out the best way to approach creating a responsive image to fit the whole background of a div container. There is also two text boxes that have an rbga value that need to be exactly inline with certain part of the image.

I am wondering if it would be better to do a z index and put the image in the html or keep the image in the css as a background image?

Right now, for the rest of my images I am using JavaScript, jQuery and PHP to resize images located in the html. I am also using media queries to adjust my page. I was trying to not do three images; but maybe that is my best option?

Here is what I have so far. I have removed extra code to not add confusion. I also attached a jpg of what i am trying to accomplish. I can get the paragraph divs to line up; but not responsively match with the image. 

<section id="content" role="main" class="cf">
   <div class="mission">
       <h1>We are What We Create</h1> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero odio, 
         gravida sedconsequat a, faucibus dignissim</p>
     </div>

   </section>

CSS
.mission {
  background-image:url(../images/gallery_banner.jpg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.mission p {
    color: #fff;
    text-align:center;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    width: 100%;
    margin: 0 auto;
    margin-top: 220px;
    margin-bottom:5%;
}

.mission h1 {
    font-weight: bold;
    font-size: 120%;
    color: #fff;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    letter-spacing:.1em;
    text-align: center;


}

Link to photoshoped image of what I am trying to do:
https://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing

Upvotes: 3

Views: 3764

Answers (2)

jjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjj

Reputation: 3118

Here's what I would do to achieve what your image suggests with consistency if resized (this is how I interpreted it). I am by no means an expert and I do not know if this is the best solution. But here goes: Measure margins and dimensions in percentage, because it will be consistent if displayed at a smaller scale.

For the leftmost box saying 'Lorem ipsum dolor':
11 / 1280 = 0.085 -> 0.8% (margin-left)
295 / 350 = 0.842 -> 84.2% (margin-top)
494 / 1280 = 0.385 -> 38.5% (width)
49 / 350 = 0.154 -> 15.4% (height)

Then append these CSS rules to a text wrapper positioned inside the 'header image div'.

#wrapper { /* Wrapper for Left text */
    position: relative;
    top: 84.2%;
    left: 0.8%;
    width: 38.5%;
    height: 15.4%;    
}

See this jsfiddle for example.

Good luck!

Upvotes: 2

dimi boy
dimi boy

Reputation: 36

I would put the image into the html and style it with css to fit the container.

<div id="container"><img src="http://i35.tinypic.com/69kdw8.jpg" border="0" alt="Image and video hosting by TinyPic"><div id="d1">Test</div><div id="d2">Test test2</div></div>

and style it:

#container {
    position:relative;
}
#d1, #d2 {
    position:absolute;
    background-color:green;
    opacity:0.7;
    color:white;
}
#d1 {
    height:16%;
    width:39%;
    bottom:0;
    left:0;
}
#d2 {
    height:68%;
    width:29%;
    top:0;
    left:58%;
}

http://jsfiddle.net/RuwRU/

Upvotes: 2

Related Questions