CSS background colour and HTML image

Hi

I am having a css/html image issue

I got a static image using a css class called static, on my 1024 screen size it is perfect but on my 1280 screen I want the image to have a background colour of a dark grey that extends further than the image if that makes sense

I am using css mediaqueries for the larger screen

I can't work out how to do it, the HTML is below

<img src="images/landlordrefurbstatic4.jpg" alt="" title="" class="static">

HTML:

The CSS is below

/* Media Queries */

@[USER=124521]media[/USER] only screen and (min-width: 1280px) {

.static {
width: 1120px;
height: 320px;
margin: 0 0 0 -67px;
background: #373737;
}

}

Code (markup):

Sorry to post again

Kind regards

Ian

 

generally speaking any image of that size probably isn't content -- and as such doesn't belong in a IMG tag in the first place... it SOUNDS like you might be talking about what should be your body background -- but without seeing the image itself and how it's placed on the page it's hard to weigh in more than that.

Though 1120x320 is WAY too massive to have any business on a site unless it's the actual page content (like in a image gallery) if you care about accessibility, page speed, etc, etc... It almost sounds like you've painted yourself into one of the three major /FAIL/ at web design -- a fixed width layout. (the other two of course being fixed metric (px) fonts and illegible color contrasts)

 

Your css is making image resized to 1120px width and 320px height, so the background is not applicable anyway because image will full of that area.

 

i think if it is not specified the size would be original

 

Instead of adding the background color on the image, try wrapping the image with a div and add the background color to that.

HTML

<div class="bg-color">
    <img src="images/landlordrefurbstatic4.jpg" alt="" title="" class="static">
</div>

HTML:

CSS

@[USER=124521]media[/USER] only screen and (min-width: 1280px) {
.static {
    width: 1120px;
    height: 320px;
    margin: 0 0 0 -67px;
}
}

.bg-color {
    width: 100%;
    background: #373737;
}

Code (markup):

Start from that and see what happens

 

Try doing something like this for your CSS. This will center your image to the top and put the background color to #373737.

.static {
background-image: url(images/your-image.jpg) no-repeat;
background: #373737;
margin: 0 auto;
}

Code (markup):

 

Thanks @100wordrants ! I was having a similar issue. Although the specifics were different but solution from you guys helped me out. It was actually a no-brainer after all haha

I will send you a PM today or tomorrow, and if you could help me with some more coding, it'd be great. Thanks!

 

@WebBuddy Sure thing. Ill do what I can. Hope others can find this useful.