Question

Please forgive me for asking such a simple, my user name says it all. I’m having a slight problem with positioning the transparent background on my site: http://iamnatesmithen.com/bodyworks/index.php

I’ve noticed when i expand my screen, the transparent background which is nested in a carousel

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin-top: -151px;
    float: left;
    z-index: -1;
}
.rslides img {
    display: block;
    width: 100%;
    border: 0;
    float: left;
}

for some reason #carousel-bg moves out of position within the media query call out of 1050px to 1600px. “If you expand your screen size beyond 1200px you’ll notice #carousel-bg moves downwards”

Does any one know what i’m doing wrong?

Answer 1

First of all do below things

Remove images that you have added as background image using img tag.
instead of that give background using css like

background-image: url("images/carousel-bg-1.png");