CODEWITHSUNDEEP
csshtmlbackground-imagecontainers
user3375160
user3375160

Reputation: 31

Background Images - Making a full width image within a container

I need to put HTML content within a page template. The section I have been given is within a Div container defining the size I have to work with. The CSS for the template defines margins of 17.5% left and right meaning I have 65% in the centre to input my content. This is ok for a majority of the content I need to include except the background image that needs to be full width (100%). I can attach a style sheet with my content however if I change the .wrapper element in my css it causes issues with the rest of the page. I also have to change the background image on a page by page basis so have to include the image path in the HTML and not in the CSS.

What I have so far is

HTML:

 <div class="pageBackground">
        <img src="img/festival-background.jpg">
    </div>

CSS:

.pageBackground {
position: relative;

}

.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

}

What would be a correct way to make my background image 100% of the page rather then container and behind the rest of my content?

Many thanks in advance!!!

Upvotes: 3

Views: 14344

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

This is entirely possible using the same techniques as detailed in this Q/A.

Essentially, using no additional HTML, we use an absolutely positioned pseudo-element as the background to the required section/div.

.extra {
    position: relative;    
}

.extra::after {
    content: '';
    position: absolute;
    top:0;
    width: 100vw;
    height: 100%;
    left:50%;
    transform:translateX(-50%);
    background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
}


* {
  margin: 0;
  padding: 0;
}
.container {
  width: 65%;
  margin: auto;
  border: 1px solid green;
}
section {
  min-height: 100px;
  border: 1px solid lightgrey;
}
.extra {
  position: relative;
}
.extra::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="container">
  <section></section>
  <section class="extra"></section>
  <section></section>
</div>

Upvotes: 6

TylerH
TylerH

Reputation: 21098

In your CSS, add the background image to the body property and then put the rest of your site in an entire container div, within which all other properties will reside.

HTML:

 <body>
   <div class="entireSite">
     Site content goes here.
   </div>
 </body>

CSS:

.body {
   background-image:url("img/festival-background.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size:cover;
}

.entireSite {
   position: absolute;
   z-index: -1;
}

Upvotes: 2

Davion
Davion

Reputation: 911

Don't know if you have that kind of permission, but you could put img outside that div, and set them both on position absolute.

<img src="asdf>
<div class="wrapper">

CSS:

.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}

img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;

}

jsFiddle

Upvotes: 2

Related Questions