My background does not appear_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-21 06:45 出处：网络

For some reason the background does not appear. This is the CSS div.sidebar_beige { background: no-repeat left top;

For some reason the background does not appear.

This is the CSS

div.sidebar_beige {
background: no-repeat left top;
height: 142px;
margin: 35px 0 35px 0;
position: relative;}

div.sidebar_beige h3 {
    color: #f57f20;
    font-family: 'trebuchet ms';
    fo开发者_JAVA百科nt-size: 17px;
    left: 15px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 15px;
    width: 163px;
}
div.sidebar_beige p {
color: #454343;
font-family: 'trebuchet ms';
font-size: 12px;
left: 15px;
margin: 0px;
padding: 0px;
position: absolute;
top: 42px;
width: 165px;}

div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

This is the html used:

<div class="sidebar_lap sidebar_beige">
            <h3>
              Laptop Reparatie
            </h3>
            <p>

              U kan niet gelijk een nieuwe<br />
            laptop kopen? <br />
            We zijn de goedkoopste<br />
            van Friesland.
            </p>
          </div>

If possible, the best way is to give each page a unique or helpful class and/or ID on the body element. So, just for an example, one page is:

<body class="bg-custom">

and another is

<body class="bg-custom-right">

Then in your CSS you can alter it like so:

.bg-custom #selector { background-img: url(...);}
.bg-custom-right #selector { background-img: url(...);}

where #selector is the element that you want to change on each page--but without having to give each one it's own new (copied) style rules or class name(s), making your CSS and HTML cleaner and easier to maintain. (As a bonus, if there's anything else you need to use the same trick on for per-page editing, you can do so.)

You can use the order of overrides to your advantage here:

Make the copied.css just include:

div.sidebar_beige_lap {
  background: url('../images/sidebar_backup_laptoprepara.png') no-repeat left top;
}

In your page, include them in order:

<link rel="stylesheet" href="original.css" />
<link rel="stylesheet" href="copied.css" />

Any properties overridden in copied.css will win, otherwise properties from original.css are inherited.

use two classes on your div:

<div class="sidebar lap">...

Pull the bg mage out of the sidebar class so that all divs can share it. The set up a new class for each different bg you need (lpa, fcs, etc) which contains only the bg image.

Your background image is on the sidebar_lap class.

In your HTML you use sidebar_beige_lap

Change your HTML to

<div class="sidebar_lap sidebar_beige">

Using multiple CSS classes assignment:

HTML FCS:

<div class="sidebar_fcs sidebar_beige">...</div>

HTML LAP:

<div class="sidebar_lap sidebar_beige">...</div>

Single CSS:

div.sidebar_beige {
 background: no-repeat left top;
 height: 142px;
 margin: 35px 0 35px 0;
 position: relative;
}
div.sidebar_beige h3 {
 color: #f57f20;
 font-family: 'trebuchet ms';
 font-size: 17px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 15px;
 width: 163px;
}
div.sidebar_beige p {
 color: #454343;
 font-family: 'trebuchet ms';
 font-size: 12px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 42px;
 width: 165px;
}
div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}