Multiple backgrounds with different images in HTML

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple backgrounds with different images in HTML

toplisek

5:28 pm on Dec 15, 2014 (gmt 0)

I have set CSS3 and multiple backgrounds:
.wrapper {
width: 500px;
height: 280px;
margin: 50px auto;
}
.pageserror1 {
text-align: center;
width: 100%;
height: 100%;
margin: 50px auto;
background-image: url("images/404.png"),
url("images/504.png"),
url("images/404.png"),
url("images/608.png");
background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px, 0 0;
background-repeat: no-repeat;
}

HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Error pages</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="wrapper">
<h3>Help pages Errors</h3>
<div class="pageserror1"></div>
</div>
</body>
</html>

How to invoke with the html code specific error page/background and just 404.png. In other words hidden other images and keep CSS positions?

not2easy

6:23 pm on Dec 15, 2014 (gmt 0)

There is more than one way to do what you want, ideally it could be handled with image sprites where the position is set for each part of an image you would want to show. Depending on the size of the images it may or may not be practical.

Your background position does not state whether it is relative or absolute, if there is only one position it can occupy, the position of the parent element would determine how the positioning is applied. Positioning would be applied per image as:

background: url('images/404.png') 200 10;

Position should be set for each portion if this is to be done as image sprites. Otherwise you could set an id for each separate image and add them depending on the page:

#notfound {
 width: 500px;
 left: 0px;
 background: url('images/404.png') 150 25;
}

I am not aware of any type of background positioning that could use the number of parameters you have added, it almost looks like positioning a javascript array would use, but I'm not the most proficient css person around, and hopefully someone else has more experience in background positioning.

toplisek

9:03 pm on Dec 15, 2014 (gmt 0)

Thank you for your reply. There are many implementations like weather icons or error pages.

Is there some information and sample how to deal with absolute and relative positions in the case of background images?

lucy24

9:10 pm on Dec 15, 2014 (gmt 0)

I am not aware of any type of background positioning that could use the number of parameters you have added

I ran it to ground in the section on layering [w3.org] (fragment link to #layering may be eaten by Forums):

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the �background-image� property. Note that a value of �none� still creates a layer.

There does seem to be one too many numbers: shouldn't the number of values correspond to the number of named background-image files?

... excess values at the end are not used. If a property doesn't have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

Edit:

url("images/404.png"),
url("images/504.png"),
url("images/404.png"),
url("images/608.png");

toplisek, when you go back into this page code in 2015, will you remember what the filenames mean?

toplisek

1:25 pm on Dec 17, 2014 (gmt 0)

Filenames are actually design for each number which is standard error.
[en.wikipedia.org...]

lucy24

3:45 pm on Dec 17, 2014 (gmt 0)

Ah, that explains the recurring "404". But how often do you get 504 and 608 errors? I'm tolerably certain I've never met either one in my life-- in the case of 60x because it doesn't appear to exist.

So although on paper they're layering, each one is really a separate image occupying a separate location? What's the advantage of using three files instead of one? Seems like a case for sprites instead.