I am trying to replicate background image placement

HTML & CSS
1

I am trying to replicate the background image here.

Seen on here: https://herethere-blog.blogspot.com/

How it is set up.

How do I do that?

https://jsfiddle.net/vt15d09h/5/

Is all of this code needed to do that?

.bg-photo-overlay {
  background: rgba(0, 0, 0, .26);
  background-size: cover;
  height: 480px;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.bg-photo-container {
  height: 480px;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 1;
}


@media (min-width: 1201px) .bg-photo {
  background-image: url(https://i.imgur.com/A1q9bIZ.jpg);
}

.bg-photo {
  background-image: url(https://i.imgur.com/A1q9bIZ.jpg);
}

.bg-photo {
  background: #444444 url(https://i.imgur.com/A1q9bIZ.jpg) no-repeat scroll top center;
  background-attachment: scroll;
  background-size: cover;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  height: calc(100% + 2 * 0px);
  left: 0px;
  position: absolute;
  top: 0px;
  width: calc(100% + 2 * 0px);
}

.bg-photo {
  background-attachment: scroll !important;
}

<div class="bg-photo-overlay"></div>
<div class="bg-photo-container">
<div class="bg-photo"></div>
</div>

<div class="container">
2

Add position and z-index to your .container class to get your content to appear above your background image.

.container {
  position: relative;
  z-index: 3;
}
3

Norton won’t let me go to that page.

BLOCKED BY

Dangerous Web Page Blocked

You attempted to access

https://herethere-blog.blogspot.com/

This is a known dangerous webpage. It is highly recommended that you do NOT visit this page.

4
5

I can see the screenshot but can’t get to the actual site but it just looks like a background image on the body to me? Is there something special about it?

@Kicken has given you code to make it show using your current code anyway.

7

Here is a live site them example: https://storywobble.blogspot.com/

Trying the replicate the background image placement.

What else needs to be adjusted in here? https://jsfiddle.net/8wa79c0k/1/

How do I move the videos down?

8

You just need to move the image to the top with top:0; if using the same method as you posted above and then raise the z-index on the container…

.bg-photo-overlay {
  background: rgba(0, 0, 0, .26);
  background-size: cover;
  height: 480px;
  position: absolute;
  width: 100%;
  z-index: 2;
  top:0;
}

.bg-photo-container {
  height: 480px;
  overflow: hidden;
  position: absolute;
  top:0;
  width: 100%;
  z-index: 1;
}


@media (min-width: 1201px) .bg-photo {
  background-image: url(https://i.imgur.com/A1q9bIZ.jpg);
}

.bg-photo {
  background-image: url(https://i.imgur.com/A1q9bIZ.jpg);
}

.bg-photo {
  background: #444444 url(https://i.imgur.com/A1q9bIZ.jpg) no-repeat scroll top center;
  background-attachment: scroll;
  background-size: cover;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  height: calc(100% + 2 * 0px);
  left: 0px;
  position: absolute;
  top: 0px;
  width: calc(100% + 2 * 0px);
}

.bg-photo {
  background-attachment: scroll !important;
}

.container {
  position:relative;
  z-index:2;
  max-width: 642px;
  margin: 50px auto 0;
  padding: 0 15px;
  background: #121212;
  border: 1px solid #0059dd;
  box-shadow: 0 0 0 rgb(0 0 0 / 20%);
  border-radius: 0;
}

I’ve no idea what you mean. Try the above code first and then see if you still have a problem.

1 Like
9

Here is from what you gave me: https://jsfiddle.net/n92yof4t/

Would this be an improved version?

From AI

/* Overlay */
.bg-photo-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 480px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.26);
  background-size: cover;
}

/* Container */
.bg-photo-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 480px;
  z-index: 1;
  overflow: hidden;
}

/* Background Image */
.bg-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #444444 url(https://i.imgur.com/A1q9bIZ.jpg) no-repeat scroll top center;
  background-attachment: scroll;
  background-size: cover;
  -webkit-filter: blur(0px);
  filter: blur(0px);
}
10

Great attempt! Your code seems on the right track, but you might simplify it by combining the styles for .bg-photo and .bg-photo-overlay . Also, consider adjusting the media query syntax for better compatibility. Keep experimenting!

11

@infomodcarparking you seem to be quoting @asasass’ s orginial post, there has been input from Paul and Kicken since then. Can you give an example to go with your comment — that might be helpful.

2 Likes
12

No, this would be an improved version.

No need for any of those empty divs including the silly padding div.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.