How to Add Background Image in CSS

How to add a background image to a section CSS

In order to add background image to any html element you will need the following line added to your css:

background-image: url("pathtoimage");

In your css code there is :

section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}

this code here will fetch for all section html tags and apply to them the styles.

in here you can even notice the first background-color:#373B44; that is applied to all sections and the second background-color: #FE4B74; that is only applied to sections with that are 2n

for example:

(1st section html element in your page) Section 1 will be color #373B44
(2nd section html element in your page) Section 2 will be color #FE4B74
(3rd section html element in your page) Section 3 will be color #373B44
(4th section html element in your page) Section 4 will be color #FE4B74
and so on

Now in order to add a background-image , all we have to do is add the code I provided above to your section in that way

    section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;

/*added here*/
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
/*added here*/ }

section:nth-of-type(2n) {
background-color: #FE4B74;
}

However, now you have two problems :
1- same background image in all sections (no alternating)
2- the image might be too small , not fit or might be repeated in a bad looking way

so in order to solve problem 1 all you have to do is just the same thing as what happens with background-color . So we just add another background-image under the 2n like so :

 section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}

section:nth-of-type(2n) {
background-color: #FE4B74;
/*this will overwrite the other background image for your 2n sections*/
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}

In order to solve the 2nd issue , you might want to use the following:

  background-repeat:no-repeat; /*removes repetition*/
background-size:cover; /*allows picture to take up whole section space*/

and the final code will look like this

section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat:no-repeat;
background-size:cover;}

section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}

To better understand the background properties in CSS , I would really suggest going into the following link :
https://www.w3schools.com/css/css_background.asp

And this link will help you understand the section:nth-of-type(2n)
https://www.w3schools.com/cssref/sel_nth-of-type.asp

The codepen link
https://codepen.io/sara-kat/pen/gKrVpg

Have a good day

Adding background image to div using CSS

You need to add a width and a height of the background image for it to display properly.

For instance,

.header-shadow{
background-image: url('../images/header-shade.jpg');
width: XXpx;
height: XXpx;
}

As you mentioned that you are using it as a shadow, you can remove the width and add a background-repeat (either vertically or horizontally if required).

For instance,

.header-shadow{
background-image: url('../images/header-shade.jpg');
background-repeat: repeat-y; /* for vertical repeat */
background-repeat: repeat-x; /* for horizontal repeat */
height: XXpx;
}

PS: XX is a dummy value. You need to replace it with your actual values of your image.

How to add Background Image in CSS and HTML

Try using the background-image tag. Use min-height: 100%; to make the image fit the entire page.

<h1>Title</h1>

<style>
h1 {
color: #FFFFFF
}

body {
min-height: 100%;
background-image: url(/*The link goes here*/);
}

</style>

Best way to implement background image on HTML or body

body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}

This would be the best way, you could apply it to the HTML, it really depends on what you prefer...

background-image:url('../images/background.jpg');

Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.

background-attachment:fixed;

When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.

background-repeat: no-repeat;

When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.

background-size: cover;

When you apply this you will set the background-size to cover, combined with no-repeat and attachment: fixed it makes for a good way to style your background image

Set background image and color in css

Add z-index:-1; to your pseudo element #canvas-preview::before to make visible the Text

As it comes over the #canvas-preview as a layer and works as fallback in case your bg-image won't load.

So to make visible the text-layer over that you need to lower the z-index of your pseudo element.

Updated Code Snippet

#canvas-preview {  width: 200px;  border: 1px solid #000000;  box-sizing: border-box;  position: relative;  background-image: url(https://hd.unsplash.com/photo-1463950922781-0e6d07cbd146);}#canvas-preview::before {  background-color: rgba(0, 128, 0, 0.5);  content: '';  display: block;  height: 100%;  position: absolute;  width: 100%;  z-index: 1;}#custom-canvas {  margin: 10px;  color: #ffffff;  z-index: 2;  position: relative;}
<div id="canvas-preview">  <div id="custom-canvas">There is some text</div></div>

How to add background image in section of html by using css?

Enclose the path to image in quotes

 background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('images/taj-mahal.jpg');


Related Topics



Leave a reply



Submit