Responsive Images using CSS background image

Question

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

dimi boy · Accepted Answer · 2013-04-20 01:02:02Z

2

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/

answered Apr 20, 2013 at 1:02

dimi boy

363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ry- · Accepted Answer · 2013-05-14 14:03:53Z

2

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!

edited May 14, 2013 at 14:03

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Apr 19, 2013 at 23:24

jjjjjjjjjjjjjjjjjjjj

3,1181 gold badge16 silver badges14 bronze badges

Collectives™ on Stack Overflow

Responsive Images using CSS background image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related