This short lesson will be about how to create a beautiful fixed background on your website (or on a one-page page) that will smoothly flow from one image to another as the user scrolls the page. CSS has this property background-attachment: fixed , which allows you to fix background image. That is, when you scroll the page, it will not scroll with the page. But there is no property in CSS that would allow us to change images when scrolling, so we will use Javascript.
You may not understand what I’m writing about, so watch the demo and you will see this beautiful effect for yourself:
We'll start by defining the HTML structure of the page for which we're making this effect:
As for styles, there are not very many of them here.
We make the block height as high as possible. That is, the height of the user's browser window.
I commented on some properties, I think it’s clear which property is responsible for what. If not quite, write in the comments! 🙂
That's all. It’s a beautiful effect, and I think it won’t be difficult to insert it into your website! I wish you success, if you have any problems with the installation, write in the comments :)
P.S.: I changed the site design. In my opinion, it is more modern and convenient.
When installing a fixed background image under the table in which we will have text and other helpful information, the following effect is created: when scrolling a table with text, the background below it remains motionless, and does not move along with the table. Like here:
This effect can create some illusion of double-layering, some space on your pages.
Typically, the effect of a still image background is achieved by setting the following attributes to the CSS style sheet: background-attachment: fixed; We are talking about a CSS style sheet, which you have in a separate document with the extension .css
There are several ways to install what we need.
We select a picture that will be our background. In this case, I take this picture (click on the thumbnail to see full size):
BODY(background-image: url(background image address); background-attachment: fixed; background-repeat: no-repeat; background-position: top;)
In this case, we take a large full-screen image as the background image (for example, 1280 by 1024 px).
Background-image: url(background image address); - enter the address of our background image 1280 by 1024 px.
Background-attachment: fixed; - we give the background an instruction to remain fixed, that is, motionless.
Background-repeat: no-repeat; - we give the background an instruction not to reproduce.
Background-position: top; - set the position of the background image: set to the top edge of the page.
I created a simple table on 70% of the screen and placed text and two pictures in it for clarity. This is what we got on the page: (to see the effect of a stationary background, scroll the page up and down).
Let's try to put a small picture that will automatically repeat and fill the entire space of the page, forming a background pattern. Here's the picture:
At the same time, we fix the entire background by writing the following construction in the CSS style sheet:
Here we only set the parameter: background-attachment: fixed; - that is, they prescribed an instruction to the browser to make the background image motionless. Since we didn’t tell the picture “not to multiply”, it should multiply on the entire screen.
Let's try to install a background image on one side, and place a table with text and pictures on the page on the opposite side so that it does not block the background image. To do this, we will write in css document following:
Background:#e0ddd8 url (address of the background image) - the color under the background image is beige, matching the background color of the image itself. This is done so that the transition of our picture into the background is not visible (the picture occupies only part of the screen).
No-repeat - the picture does not multiply (there is one large picture with one of my favorite American actors - Robert Duvall).
Fixed - the background is fixed, that is, motionless.
Left top - aligned to the top left edge of the screen (you can put the picture on the right, and the site table on the left, as you wish. To do this, in the html document in the table you will write:
In this tutorial, we will study in detail the technology of creating a responsive background image that will occupy the entire viewing area in the browser at any resolution. And we will use CSS - the background-size property. Without JavaScript:
EXAMPLE
DOWNLOAD SOURCES
Examples of using responsive background images
Today, sites in which the background image covers the entire displayed area of the page are very popular.
Below are some of these websites:
Sailing Collective
Digital Telepathy
Marianne Restaurant
If you want to achieve a similar “look” in your project, you are on the right track.
Basic Concepts
Here's our game plan.
Use the background-size property to cover the entire viewport
The CSS background-size property can be set to cover . The cover value instructs the browser to automatically and proportionally scale the background image in length and width so that it remains equal to or larger than the width/height of the viewport.
Using a media query to get a smaller version of a background image for mobile devices
To reduce page loading time on small screen resolutions, we will use a media query to get a smaller version of the background image. But this is not necessary and can be omitted. This technology works great without this.
But still, using smaller versions of the background for mobile devices is not a bad idea, and I will explain why.
The image that will be used in the example is about 5500 by 3600px in size.
With this resolution, we have the advantage that we achieve coverage of the entire viewing area on most wide-format monitors currently produced, but the disadvantage is the image size. This is about 1.7 MB.
Leaving that much space to load just a background image is not a good idea in any case, and in the case of mobile devices it is a very bad idea. In addition, such a resolution is simply unnecessary on low-resolution screens ( I'll tell you more about this later).
So. Let's get started.
HTML
Below is everything you need from the markup:
...The content of your page...
We will assign a background image to the body element and thus achieve complete background coverage.
However, this technique will work on any block element (such as a div or form ). In case the width-height of your block container is movable, the background image will also resize to fill the entire container area.
CSS
We declare the properties of the body element as follows:
body ( /* Location of the background image */ background-image: url(images/background-photo.jpg); /* Background image is centered horizontally and vertically */ background-position: center center; /* Background does not repeat */ background-repeat: no-repeat; /* The background is fixed in the viewport and therefore does not move when the height of the content exceeds the height of the image */ background-attachment: fixed; /* This property causes the background to change scale when the size of the containing container changes */ background-size: cover; /* Background color that will be displayed when loading a background image */ background-color: #464646; )
The most important value property in this list is:
background-size: cover;
It's worth paying attention to it. This is where the miracle happens. This value-property pair instructs the browser to scale the background image in such proportions that the height-width remains equal to or greater than the height-width of the element itself. ( In our case this element- body.)
And here an unpleasant situation arises with the property-value pair. If the background image has a lower resolution than the body element, which can happen either when the page is displayed on high-resolution screens, or when you have tons of content on the page, the browser will stretch the image.
And as you know, when we stretch an image beyond its actual size, we lose image quality ( in other words, pixelation appears):
When an image is scaled towards its original size, the image quality decreases.
Don't forget about this when choosing a background. In the demo, we're using a 5500 by 3600px photo for larger screens, so it's unlikely that something similar will happen in this case.
To ensure that our background is center aligned, we declared the following:
background-position: center center;
This will set the scaling axes to the center of the viewport.
Here's what we'll do. Let's set the background-attachment property to fixed to make sure the image stays in place even if we scroll down the page:
background-attachment: fixed;
In the demo example I included the option “ download some content" so that you can observe the behavior of the background when scrolling the page.
All you have to do is download the demo and experiment a little with the positioning properties ( background-attachment and background-position ) to see how they affect the scrolling behavior of the page and background.
The following property values are self-explanatory.
CSS Shorthand
Above, for clarity, I defined CSS properties in full.
And this is what the short version looks like:
body ( background: url(background-photo.jpg) center center cover no-repeat fixed; )
All you have to do is change the url value to the path to your image.
Optional: media query to get a smaller version of the background image
For lower resolution screens, we will need Photoshop to proportionally reduce the image resolution to 768 by 505px. I also ran it through Smush.it to reduce the file size. This allowed the size to be reduced from 1741 to 114 kilobytes. This reduced the file size by 93%.
Don't get me wrong, but 114 kilobytes is still quite a lot to use for some types of web design. And we'll only load those 114 kilobytes if necessary, because looking at the stats, there are trade-offs to be made between desktop and mobile design.
And here is the media query itself:
The key part of the media query is the max-width: 767px property, which in our case means that if the browser viewport is larger than 767px, a large image is used.
The downside to this method is that if you resize the browser window from, say, 1200px to 640px (or vice versa), you will see a flickering screen while the smaller or larger image loads.
And in addition, due to the fact that some mobile devices can work at a higher resolution - for example, the iPhone 5 with a Retina display with a resolution of 1136 by 640px, a smaller image will look ugly.
Almost every popular website has a nice appearance. An important part of website design is the background, also called background, which each of us can create or change. In this article I will tell you how to put a background on a website.
Making a new background for websites
To complete the task, you can use one of 4 methods:
- 1. Background with one color
- 2. Background with texture
- 3. Background using a gradient
- 4. Background from a large image
Create a background using one color
To create or change the background of the site, which consists of one color, you need to go to the file style.css, in which find the value - body (it is responsible for the main body of the site). Now you need to register the background-color function if it did not exist and indicate the color code. In the case when you need to create a white background for a website, you will have to write the following code:
background-color: #83C5E9 ; (blue background, as in the example)
You can find a complete list of colors on the website - (STM). To change the color, simply change the value after the colon and enjoy your efforts.
Creating a background using texture
This method has been especially popular lately, as it allows you to create a beautiful background for the site. Textures can be simple but very beautiful, which is why they are often used. In order to connect any texture, you need to upload it to the image folder on the hosting where your site is installed. After this you should write the following code:
background-color: #537759;
background-image: url(images/pattern.png);
This code contains a familiar parameter for maintaining the color (it is green) and an element that is responsible for connecting the green texture.
Making a background using a gradient
Any image that is connected using css functions can be repeated both horizontally and vertically (along the axes X And Y). This opportunity allows us to create any simple background for the site with our own hands. To do this, you need to create a gradient 1 megapixel wide (see the image below), save it as an image and upload it to your hosting. After this, you can write the necessary code, namely:
background-color: #83C5E9;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
In this set, in order of priority, there is a function responsible for the background color, which we use for reinsurance. After this, a parameter that is responsible for connecting the gradient and finally, a function that is responsible for repeating the gradient along the X axis.
Using a large image for the website background
This method is the second most popular, as it allows you to use various pictures to create a background. To implement this method, you only need to upload a large image to the site’s images folder and enter the following code:
background-color: #000000;
background-image: url(images/image title.jpg);
background-position: center top;
background-repeat: no-repeat;
If everything is clear with the first two parameters, then the last two need to be covered. The third function allows you to fix the image in the center of the site, and the last parameter blocks its repetition throughout the entire page structure.
Changing the background on ucoz websites
Those methods of creating a background for a site can be used on different content management systems, but not on sites - ucoz. In order to change the background for the ucoz website, you need to go to the site control panel, go to "Design Management", and then in "Editing templates".
Now you need to open the Style Sheet (CSS), find the line "body" and parameter "background". After this, you need to copy the link, paste it into your Internet browser and you will have access to the picture that was the background.
To use a new background, you just need to upload it to the File Manager. At the same time, make sure that the name of the new background image is the same as before the change. Save your work and go to the website to view the work done.
Changing the background for the site to HTML
If you want to make the background on an html site using an image, then simply enter the line in the code:
And if you want to make the background of the site using color, then the line should look like this:
This concludes our story. Now you know how to make a background for a website. Happy projects!
Any room will look much better if its floor is covered with an expensive Persian carpet. So why is your website worse? Maybe it’s time to “cover” its floor with an expensive, elegant handmade carpet. Let's take a closer look at how to make a background for a website:
Background for the site
It happens that the old website design has become boring. And I want something new and tasty. And the new design will be the same if you make it yourself.
But completely changing the entire design of a resource on your own is a thankless task. And not everyone’s hands are properly trained for this task. Therefore, the easiest way to refresh an old template is to change the background color of the resource or its background image.
There are several ways to change the background on a website. For this, the capabilities of CSS or html are used. But many of the properties for working with the background have the same name and method of application in these web technologies.
Basics of working with backgrounds in html
Several elements can be used as a background:
- Color;
- Background image;
- Texture image.
Let's look at the use of each of them in more detail.
To set the background color for a site, use the background-color property of the style attribute. That is, to set the main color for a web page, you need to write it inside the tag
. For example:
Website background #55D52B
In addition to the hexadecimal color code, a value in keyword or RGB format is supported. Examples:
Website background rgb(23,113,44)
Website background green
Setting the background color using keywords has a number of limitations compared to the other two methods.
HTML supports only 16 keywords to set colors. Here are a few of them: white, red, blue, black, yellow and others.
Therefore, in order to set the background for an html site, it is better to use hexadecimal or RGB format.
In addition to color selection, other customization options are available. If the background-color property is set to transparent , the background of the page will become transparent. This value is assigned to this property by default.
Now let's look at the capabilities of the hypertext language for setting a background image for a site. This can be done using the background-image property.
As you can see from the code, the image is linked through the url path specified in parentheses. But not all pictures are so large that their size fills the entire screen area. Let's see how the smaller picture will be displayed.
Suppose we are developing a website about poetry, and we need to use an image of Pegasus as the background. The winged horse will personify the freedom of the poet’s creative thought!
We need the image to be displayed in the middle of the screen once. But, unfortunately, the browser does not understand our lofty desires. And it displays a smaller image for the background of the site as many times as the screen area can accommodate:
Perhaps four smiling horses with wings will be too much inspiration for poets. Therefore, we prohibit the cloning of our Pegasus. We do this using the background-repeat property. Possible values:
- repeat-x – repeat the background image horizontally;
- repeat-y – vertically;
- repeat – on both axes;
- no-repeat – repetition is prohibited.
Among the listed options, we are interested in the last one. Before changing the background of the site, we use it in our code:
But, of course, it would be better if our flyer was located in the middle of the screen. The background-position property is precisely intended for positioning the background image on the page. You can set location coordinates in several ways:
- Keyword ( top, bottom, center, left, right);
- Percentage – counting starts from the upper left corner;
- In units of measurement (pixels).
Let's use the simplest centering option:
It happens that you need to fix the position of a picture when scrolling. Therefore, before making an image as the background of the site, use the special property background-attachment . The values it accepts are:
We need the last value. Now our example code will look like this:
Website texture background
In the first example we used a large and beautiful desert landscape for the background. But you have to pay in full for such beauty. The weight of an image made in high quality can reach several megabytes.
This volume does not in any way affect the page loading speed of the browser with a high-speed Internet connection. But what about the mobile Internet, when using it, loading several “meters” will take a lot of time?
All these problems are solved with the help of a textured background. It uses a small image as a texture pattern. Even if it is repeated many times, the drawing is loaded only once.
