What is an embedded web background. What are web applications and dynamic web pages. Typical application of web applications
| 16.04.2015
Over the past year, web designers have increasingly begun to use an original way to spice up a site - installing a video as a page background. An interesting plot or just a “live” picture on the background will decorate even an ordinary business card site, interest the user and encourage them to stay longer on the site. Today we will share with you one of the ways to set a fullscreen video background for a website using HTML5 and CSS.
If you are firmly convinced that you want to set a video for the background on the site, you need to know some nuances:
- First, you must remember that the video has a fairly large weight. This can negatively affect page loading speed, especially if the user has a slow Internet connection. Therefore, choose videos that are not too long in time. In the case where you need to use a rather long video, be prepared to either work on reducing its weight, or that you have to sacrifice part of the audience.
- Secondly, avoid auto-play audio from videos. Use either videos without audio, or add the ability for the user to turn on the sound himself if he needs it. Automatically playing a sound when opening a site is considered very bad form.
- Thirdly, you need to take care of cross-browser compatibility and correct display and playback of video on all devices, as well as provide an alternative to the video (in cases where it does not play). We will show how to do this in our example below.
- And fourthly, you should think carefully about whether a videophone is appropriate on the site where you want to install it, since it is very easy to cross the line between originality and uselessness of this undertaking. In no case should the video distract the user from his main goal, due to which he came to the site. When setting a video background below text content, don't forget to check how readable the text is. For example, it may fade into the background at a certain point in the video playback (white text on a white background, black text on a black background, etc.).
1.HTML
For our example, we took a video with a resolution of 1920 × 1080, a duration of 15 seconds and a weight of just over 3 MB. Inside the block
For Tag
- width - the width of the area for playing the video;
- height - the height of the area;
- autoplay - automatic video playback;
- loop - cyclic repetition of the video;
- poster is an image that is displayed in place of the video while it is loading or not available.
Next, we have two tags
2. CSS
Our background stylesheet looks like this:
#video-bg ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 1; background: url(bg/daisy-stock-poster.jpg) no -repeat #94a233; background-size: cover; ) #video-bg > video ( position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height : auto; ) @supports (object-fit: cover) ( #video-bg > video ( top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; ) )
As you can see from the code, the background is set to the entire page, and the image (a frame from the same video) is set as a backup background. In the most extreme case, the background color will be #94a233 .
There is also an @supports directive in the code that checks if the browser supports the object-fit property. If yes, then the background is set to cover and is proportionally displayed at different screen sizes.
According to caniuse.com, the object-fit property is currently supported by all browsers except Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1, and Android Browser 4.1-4.4.
From the author: In this tutorial, we'll walk through a simple technique for creating a background image that will fully stretch to the full width of the browser's viewport. To do this, we need the background-size CSS property; JavaScript is not needed.
Examples of Responsive Entire Background Images
Nowadays, it has become quite popular to use a huge photo as a background that takes up the entire web page. Here are some examples of sites that have responsive full background images set:
If you would like to achieve a similar result in your next web project, then this article is for you.
Basic principles
Here is our action plan.
Use the background-size property to completely fill the viewport
The background-size CSS property is set to cover. The cover value tells the browser to automatically and proportionally scale the width and height of the background image so that they are always equal to or greater than the width/height of the viewport.
Use a media query to handle small mobile background images
To improve page loading speed on small screens, we'll use a media query to render a smaller version of our background image. It's not obligatory. This technique will work without it. But why is using a small mobile background image a good idea?
The image I used in the demo is 5500x3600px. This resolution is sufficient for most widescreen computer monitors currently on the market. But for this you have to process a 1.7MB file.
Such a huge additional load just for the sake of placing a background photo in any case will not bring anything good. And, of course, this will be extremely bad for connections using the mobile Internet. Also, this resolution is overkill for devices with a small screen (more on this later). Let's take a look at the whole process.
HTML
For markup, all you need is this:
We're going to assign a background image to the body element so that the image always takes up the entire viewport of the browser.
However, this technique will also work for any block-level element (such as a div or form). If your block element's width and height are "fluid" then the background image will always scale to fit the entire container.
css
Set the following styles for the body element:
body ( /* Path to the image */ background-image: url(images/background-photo.jpg); /* The background image is always centered vertically and horizontally */ background-position: center center; /* The background image is not repeated * / background-repeat: no-repeat; /* The background image is fixed in the viewport, so it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* This is what allows the background image to adjust to the size of the container */ background-size: cover; /* Sets the background color to be displayed while the background image is loading */ background-color: #464646; )
body ( /* Path to image */ background-image : url (images / background-photo . jpg ) ; /* The background image is always centered vertically and horizontally */ /* The background image is not repeated */ background-repeat: no-repeat; /* The background image is fixed in the viewport so it doesn't move when the content height is greater than the image height */ /* This is what allows the background image to adjust to the size of the container */ background-size:cover; /* Sets the background color to be displayed while the background image is loading */ background-color : #464646; |
The most important property/value pair to pay attention to is:
background-size: cover;
background-size:cover; |
Here is where the magic begins. This property/value pair tells the browser to scale the background image proportionally, i.e. so that its width and height are equal to or greater than the width/height of the element (in our case, the body element).
However, this property/value pair has one problem: if the background image is smaller than the body element - which will happen on high resolution screens and/or when you have a huge amount of content on the page - the browser will inevitably zoom in. And, as we know, when we increase the dimensions of a bitmap, the quality of the image decreases (in other words, pixelation occurs).
Increasing the size of an image relative to its original dimensions affects the quality of the image. Keep this in mind when choosing the right image. The demo uses a huge 5500x3600px photo for widescreen monitors, so a very large screen would be required for quality distortion to occur. Let's move on. To ensure that the background image is always centered in the viewport, we write:
background-position: center center;
background - position : center center ; |
This entry places the background on the coordinate axis in the center of the viewport. Next, we need to define what will happen when the height of the content exceeds the visible height of the viewport. When this happens, a scrollbar appears.
In this case, we need to make sure that the background image remains in its original position even when the user scrolls down the page. In this situation, the image will either simply end when scrolling, or it will move as the scroll progresses (which can be very distracting for the user). To fix the background, we set the background-attachment property to fixed.
background-attachment: fixed;
background-attachment: fixed; |
In the demo, I've added the ability to "load content" so you can see what happens when a scroll bar appears in the browser when the background-attachment property is set to fixed. You can also download the demo and play around with element positioning properties (like background-attachment and background-position) to see how it affects page scrolling and the background image. The rest of the property values are pretty self-explanatory on their own.
CSS shorthand
I have detailed the background properties to make them easier to explain. The abbreviation will also be equivalent:
body ( background: url(background-photo.jpg) center center cover no-repeat fixed; )
body ( background : url (background - photo . jpg ) center center cover no - repeat fixed ; |
All you have to do is change the url value to point to the path to your background image.
Optional: media query for small screens
For smaller screens, I used Photoshop to downsize the original background image proportionally to 768x505px, and I used Smush.it to downsize a bit more. This reduced the file size from 1741KB to 114KB. Those. image size reduced by 93%.
Please don't get me wrong, 114KB is still quite a lot for a purely aesthetic design element. Considering the additional 114KB load, I would only use such a file if I saw an opportunity to significantly improve the user experience (UX) of the site, because. at the moment, a significant proportion of Internet traffic comes from mobile devices background-image: url (images / background-photo-mobile-devices. jpg) ;
The media query has a width limit of max-width: 767px, which means that if the browser's viewport is larger than 767px, then a large background image will be loaded.
The disadvantage of using this media query is that if you change the width of your browser window from, say, 1200px to 640px (or vice versa), you will immediately see when the small or large background image is loaded.
In addition, because some small screen devices can display more pixels—for example, the iPhone 5 with retina display can display 1136x640px resolution—the small background image will be pixelated.
Summarizing
You can view a more up-to-date version of the source code from this GitHub tutorial. I can only warn you about one thing: please use this technique with caution, because large files can seriously damage the UX, especially if the end user is using a slow and unreliable Internet connection. This is another reason why you should choose an appropriate background color so that the user can read the content while the background image is loading.
How to install a site on the desktop monitor?
Probably the first thing that any user gets tired of is looking at the wallpapers that are installed on the Desktop. Many people constantly look at the default picture for years, even if the system has been reinstalled more than once. All users quickly get bored with it, and they are looking for suitable pictures for the Desktop. Some users prefer animated wallpapers. I suggest that you set the main page of your favorite site as wallpaper (any page, of course). Now, in times of unlimited Internet, this is sometimes very, very convenient for some, especially when a computer or laptop is constantly connected to the network. In any case, it's a good option. This trick appeared in Windows XP. Alas, it ended there. Interactive tables are gone. It was very interesting for me personally to watch the updating of news sites on-line. Such a setting on the Desktop would be useful to many users. But, again, the creators of new versions of Windows decided to leave the Desktop without the ability to reflect an interactive page. To be honest, very, very sorry. Personally, this opportunity is sometimes very lacking for me.
But let's move from words to deeds. Install the web page on the desktop
- Right-click on any free space on your desktop
- On the additional menu that appears on the Desktop, select the item Properties.
- Let's select the Desktop tab and click Desktop setup...
- From the Desktop Items menu, select the tab Web and then click on the button Create... Well, or choose an item My current home page. The background will display the page of the site that is set as home in the default browser.
In the window that appears, simply enter the previously copied address of your favorite site from the address bar of your browser.
Close successive dialog boxes by accepting the changes and clicking OK. Now, instead of a boring picture, you have a page of a website you like and, looking at the site on your desktop, you can observe changes in the network interactively.
Loading...