CODEWITHSUNDEEP
htmlcssbackground-imagebackground-color
Doodoo
Doodoo

Reputation: 71

How to make background color same as image?

I'm trying to set an image center of the screen, and the dimension of the image is not as big as the entire screen. How can I make the background color seem like part of the image? Thus creating the illusion that the image is full screen?

I tried using the color of the image and setting it as part of background color, but it still doesn't match.

html

  <section class="container">
    <img class="bg-img" src="../assets/beauty-bg-img.jpg" alt="background image">
  </section>

css

.container {
    background-color: #F3D5DB;
}

As can be seen, the image is centered, but image and background color doesnt go hand in hand.

How can this be done?

background

Upvotes: 3

Views: 15677

Answers (4)

placeholder
placeholder

Reputation: 182

You could try using 'mix-blend-mode', the background color of your image will match with the background color of it's parent.

Please note that this might not work with your image since you are using a gradient or it could happen that your gradient will be replaced by only one color.

It's also not compatible with some browsers.

.container {
    background-color: #F3D5DB;
}

.bg-img {
    mix-blend-mode: darken;
}

Check this for more options.

Upvotes: 3

ilsloaoycd
ilsloaoycd

Reputation: 113

There are sooooo many ways at going with this. You could match the gradient perfectly, set the image as the background and make it cover the page. Gradients would be really hard to perfectly match up though, and you didn't ask for the second one. My solution is to use some simple css and a free photo editor. (You dont have to do any photo editing, I have the image). I took the colors from the top and bottom of the original image and then set a css gradient. background-image: linear-gradient(#F4DAE2, #EED5DC, #EED1D8); Super easy! Then you just set your body's min-height property to 100vh so nothing repeats. We use paint.net or photoshop to erase the edges of the image in a gradient pattern. Anyone can do this. face You can get the gradient image file from https://i.ibb.co/0BbJ6bb/face.png. We put that image in the center of the page and everything blends nicely! It's been almost a year so please mark this answer or another as the solution to close the question. Thank you!

Demo page here: https://stackoverflowanswer.glitch.me/

img {
  height: 100vh;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  opacity: 1;
}

body {
  overflow: hidden;
  background-image: linear-gradient(#F4DAE2, #EED5DC, #EED1D8);
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>html - How to make background line up with image</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>  
  <body>
    <img src="https://i.ibb.co/0BbJ6bb/face.png">
  </body>
</html>

Upvotes: 2

cssyphus
cssyphus

Reputation: 40038

There are a few ways to do this.

You can set the image as background on the body, or on a wrapper div, and use background-size property to cover.

Or, you can create a stand-alone div at the top of your code, make it position:fixed;top:0;left:0;width:100vw;height:100vh; (sets the image to full size of the viewport) and z-index:-1 (places it beneath the other divs). This is a nice effect because you can also add opacity:0.5 or some such to "dim" the image a little bit, and the rest of your webpage overlays the image.

Here are some good articles on what you can do:

https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

https://www.smashingmagazine.com/2009/03/backgrounds-in-web-design-examples-and-best-practices-2/

https://css-tricks.com/perfect-full-page-background-image/

https://www.webfx.com/blog/web-design/responsive-background-image/

https://www.taniarascia.com/background-position-fixed-and-cover-with-css/

Upvotes: 0

Cubemaster
Cubemaster

Reputation: 527

The color of your background is solid, but the Image you have selected has a very slight gradient. To see this, Look at the top and bottom of the image to see this. The image is lighter than your background on top, and darker on the bottom of the screen.

enter image description here

You could fix this using gradients, but that would require a fair bit of trial and error.

Upvotes: 1

Related Questions