CODEWITHSUNDEEP
htmlcssmobileresponsive
adambwhitten
adambwhitten

Reputation: 116

responsive div background, but no repeat

I'm trying to make this div background to act as a normal 100% image and scale the same way.

My CSS:

.videobackground{
margin-top:-5px;
max-width:1140px;
height:348px !important;
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg);
background-position:center; /* IE fix */
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

My HTML:

<div class="videobackground"></div>

Here is my issue on desktop it's looking perfectly fine.

Desktop Picture:

enter image description here

But as soon as I start to scale the page this happens.

Mobile Picture:

enter image description here

Any suggestions will be greatly appreciated, I feel like I've tried just about everything. And the reason I'm using a div background as opposed to just an image, I'm overlaying a youtube embed over the left side of the div.

Thanks so much!

Adam.

Upvotes: 3

Views: 2742

Answers (2)

Johannes
Johannes

Reputation: 67798

There are two images in DIVs above and below your .videobackground div that contain the same picture, but conflict with your background image.

You should wrap these 3 DIVs with another DIV and assign the background image to that DIV (and remove it from the others)

(also make sure to use background-repeat: no-repeat, background-size: cover and background-position: center center)

ADDITION AFTER COMMENT:

Your HTML code is (partly):

<div class="bit-1">
  <img src="imgs/rpp-behind-the-scenes-hero1.jpg" width="100%">
</div>
<div class="bit-1">
  <div class="videobackground"></div>
</div>
<div class="bit-1">
  <img src="imgs/rpp-behind-the-scenes-hero3.jpg" width="100%">
</div>

Change that as I wrote above to something like:

<div id="wrapper">
  <div class="bit-1">
     <!-- contents here, but no image -->
  </div>
  <div class="bit-1">
    <div class="videobackground"></div>
  </div>
  <div class="bit-1">
     <!-- contents here, but no image -->
  </div>
</div>

In the CSS, remove the background-image from .videobackground and add it to `#wrapper', like

#wrapper {
  background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) center center no-repeat;
  background-size: cover;
}

Now all three DIVs have one common background image instead of the not-fitting-together three partial images before.

Upvotes: 0

Isabel Inc
Isabel Inc

Reputation: 1899

You could add 

background-repeat: no-repeat;

To your css.

So it looks something like

.videobackground{
margin-top:-5px;
max-width:1140px;
height:348px !important;
background-image:url(imgs/rpp-behind-the-scenes-hero2bg.jpg);
background-position:center; /* IE fix */
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
}

Also here's a great link on getting full container backgrounds. https://css-tricks.com/perfect-full-page-background-image/

Also as a side note you could use short hand and combine all your css properties.

  background: url(imgs/rpp-behind-the-scenes-hero2bg.jpg) no-repeat center center fixed;

Upvotes: 3

Related Questions