Is it possible to only override parts of background image?

On my site I have a table with lots of rows. The classes used for each row depends on some data

In my mind I had something like this:

Classes for each row:
Row 1: selectedRow invalidRow
Row 2: defaultRow
Row 3: defaultRow invalidRow

And with CSS code like this:

.selectedRow
{
    background-image: linear-gradient(to top, #cccccc 0%, #A0A0A0 100%);
}
 
.defaultRow
{
    background-image: linear-gradient(to top, #cccccc 0%, #dddddd 100%);
}
 
.invalidRow
{
    //Haven't quite figured this one out yet. I'm trying to get a nice arrow up in the corner

Multiple scalable background images

Recently I had a design provided that required a scalable image either side of the content area when the screen was wider then a specif point.
Since it has been a long time since my last blog post, I thought I would share my solution.

The image needed to scale so that width wise it fitted on screen and scaled up to a maximum size.
Afetr that maximum size the image no longer scales and just sits either side of the content.

background-image acting weird

Hi guys, I have some strange issue with the "background-image" property, when I insert the "background-image" property into the tag, it displays normally like it should as you can see in the first picture I've attached, but when I put the "background-image" property into an CSS external file, it does not show the custom background image at all as in the last picture I've attached. You guys know why this is happening? the same thing happens when I try to use the @font-face property also. Any suggestions are highly appreciated.

<!doctype html>
<html lang = "en-US">
    <head>

Randomize Resizeable Background Images

Hello.

I have been asked to create a login screen with two effects:
resizeable image (image that stretches to always fill the screen)
randomized background images

I have successfully coded the stretch-able background image with:

html:

Css:
img.bg {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
width: 100%;
}

However, I can't figure out how to also randomize the background image as most methods use php.

Advanced backgrounds

Hey, I'm new here, so I hope I'm not asking already answered questions. I couldn't really use the search function, because I have no idea how this is called. I don't even know whether this is possible using CSS or not, but that's why I'm here..

I'm looking for a way to implement a background such as on this website:
http://www.thecandlethieves.com/

There's a fixed background image, but on top of that there's this kind of raster which scrolls along with the rest of the design. Does anyone have an idea how to make this?

Syndicate content