Css style

How to set a background image in CSS

Creating a website is a great way to express yourself. While there are plenty of website building tools out there, writing it yourself is a fun way to learn more about how websites work behind the scenes. A good beginner project is to create a website and add a background image with CSS. This project will get you up and running with HTML and CSS.

What is CSS?

CSS stands for Cascading Style Sheet. It is a programming language that allows you to style markup languages. One of these markup languages ​​is HTML or Hyper-Text Markup Language. HTML is used to create websites. While you can control some of the styling of the website using HTML, CSS offers a lot more control and design options.

Create a basic website with HTML

As CSS is just a styling language, to use it we first need something to style. A very basic website will be enough for us to start playing with CSS. Our page will display “Hello World”.





Hello World



In case you’re unfamiliar with HTML, let’s quickly review what all the elements do. As mentioned, HTML is a markup language, which means it uses tags to mark what text is. Every time you see a word surrounded by it is a beacon. There are two types of tags, a tag that marks the beginning of a section using and one that marks the end of a section using >. The text of a section also aims to make this distinction easier to see.

USE VIDEO OF THE DAY

In our example, we have four tags. the html tag indicates which elements are part of the website. the to manage The tag contains header information that is not displayed on the page but is needed to create the page. All items shown are between body Keywords. We only have one element displayed, the p label. It tells the web browser that the text is a paragraph.

Related: 10 Simple CSS Code Examples You Can Learn in 10 Minutes

Add CSS to HTML

Now that we have a simple page, we can customize the styling with CSS. Our page is pretty simple at the moment, and there’s not much we can do, but let’s start by making our paragraph stand out so we can distinguish it from the background by adding a border.





Hello World




Now our paragraph will be surrounded by a black border. Adding a style description in CSS to our paragraph tag told the website how to style the paragraph. We can add more descriptions. Let’s increase the white space, or padding, around our paragraph and center our text.





Hello World




Our website looks better, but our HTML is starting to get messy with all those descriptions in the paragraph tag. We can move this information to our header. Our header contains the information we need to display the website correctly.






Hello World



Now our HTML is easier to read. You will notice that we had to change some things. The style tag indicates the style information of the web browser, but also what to style. In our example, we used two different ways to tell it what to style. the p in style tag instructs the web browser to apply this style to all paragraph tags. the #ourparagraph section tells it to only style elements with the id ourParagraph. Notice that identifier information has been added to the p tag in our body.

Importing a CSS file to your website

Adding style information to the header makes our code much easier to read. However, if we want to style many different pages the same way, we need to add this text to the top of each page. It might not seem like a lot of work, you can copy and paste it after all, but it does create a lot of work if you want to edit something later.

Instead, we’ll keep the CSS information in a separate file and import the file to style the page. Copy and paste information between style tags into a new CSS file ourfileCSS.css.

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Then import the file into the HTML file.






Hello World



Add a background image with CSS

Now that you have a solid foundation in HTML and CSS, adding a background image will be a piece of cake. First, identify which element you want to give a background image to. In our example, we will add a background to the whole page. This means that we want to change the style of the body. Remember that body tags contain all visible elements.


body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

To change the body style in CSS, first use the body keyword. Then add braces as we did before {}. All style information for the body should be enclosed in braces. The style attribute we want to change is background picture. There are many style attributes. Don’t expect to memorize them all. Mark a CSS properties cheat sheet with the attributes you want to remember.

Related: 8 cool HTML effects anyone can add to their website

After the attribute, use a colon to indicate how you will modify the attribute. To import an image, use URL(). this indicates that you are using a link to point to the image. Enclose the file location in square brackets in quotes. Finally, end the line with a semicolon. Although whitespace is meaningless in CSS, use indentation to make CSS easier to read.

Our example looks like this:


CSS background image

If your image is not displaying properly due to image size, you can edit the image directly. However, there are background style attributes in CSS that you can use to change the background. Images smaller than the background will automatically repeat in the background. To disable this, add Background repeat: without repetition; to your element.

There are also two ways to make an image cover the entire background. First, you can set the background size to screen size with background size: 100% 100%;, but this will stretch the image and may distort it too much. If you don’t want to change the aspect ratio of the image, you can also set the background size to blanket. Cover will make the background image cover the background, but not distort the image.

Changing the background color

Let’s change one last thing. Now that we have a background, our paragraph is hard to read. Let’s make its background white. The process is similar. The element we want to modify is #ourParagraph. The # indicates that “ourParagraph” is an identifier name. Next, we want to set the Background color assign to white.

body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

CSS background color

Much better.

Continue to design your website with CSS

Now that you know how to change the style of different HTML elements, the sky is the limit! The basic method for modifying style attributes is the same. Identify the element you want to modify and describe how to modify the attribute. The best way to learn more is to play around with different attributes. Challenge yourself to change the color of your text next.



html-code-examples-featured
The 8 Best Sites for Quality HTML Coding Examples

Want to learn HTML to code your own websites and apps? Use these sample web pages and source code to teach you HTML and CSS.

Read more


About the Author