当前位置: 动力学知识库 > 问答 > 编程问答 >

css - My background does not appear

问题描述:

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';

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');

}

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>

网友答案:

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.

网友答案:

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.)

网友答案:

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');
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: