1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 11:51 pm May 20, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Responsive background images not appearing

First post, anywhere, EVER! New to coding so be gentle with me

         

AussieAndy

3:52 am on Jan 18, 2014 (gmt 0)

10+ Year Member



I'm trying to build an adaptive/semi-responsive portfolio website of my print work. Mainly to learn basic coding.
Got this page to the point where it has a responsive grid working for the desktop media query, but can't get background pictures to load. What am I doing wrong, (which is probably a lot. This is my first post ever on a forum, please point out any conventions I'm not following or protocol stuff-ups. And I'm new to coding and using 44 year old wet-ware, brain less plastic than when I was younger so be gentle : )

The HTML is below, the css, below that: It's basically a three column grid that I want to expand and scale along with the background pics. The actual website link is here:

<snip>

(The weird colours on the three column grid are just there to help me figure out what div is doing what and the website's still under construction and so a lot of the links don't lead anywhere yet - just messing about really)



</div>


<div class="wrapper2">

<div class="articleColumn" id="articleColumna">

<div class="container5" id="wiring">
<span id="image">
<span id="image-inner">
</span>
</span>
</div>

<div class="caption">
<p><span class="rwd-break">Feature spread, layout and illustration,</span><span class="rwd-break">(concept and artwork)</span></p>
</div>

</div>


<div class="articleColumn" id="articleColumnb">

<div class="container5" id="wiring">
<span id="image">
<span id="image-inner">
</span>
</span>
</div>

<div class="caption">
<p><span class="rwd-break">Feature spread, layout and illustration,</span><span class="rwd-break">(concept and artwork)</span></p>
</div>

</div>


<div class="articleColumn" id="articleColumnc">

<div class="container5" id="wiring">
<span class="image" id="wiringPicBox">
<span id="image-inner">
</span>
</span>
</div>

<div class="caption">
<p><span class="rwd-break">Feature spread, layout and illustration,</span><span class="rwd-break">(concept and artwork)</span></p>
</div>
</div>
</div>
</body>



.wrapper2 {
min-width:769;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
background-color:#FFF;
}


.articleColumn {
width:33.3%;
height: 200px;
}


#articleColumna {
background-color:#FF8080;
float:left;
}


#articleColumnb {
background-color:#0099CC;
float:left;
}


#articleColumnc {
background-color:#001A33;
float:left;
clear: right;
}


.container5 {
width:92%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}

.image {
display: inline-block;
width: 100%;
font-size: 0;
line-height: 0;
}


#image-inner {
display: block;
height: 0;
padding-top: 58.57142857142857%;
}


.rwd-break {
display: block;
}


#wiringPicBox {
background-image:url('../images/03_TDL_wiring_desktop_b');
}

[edited by: incrediBILL at 7:25 am (utc) on Jan 18, 2014]
[edit reason] URls removed. Please see forum charter and TOS [/edit]

lucy24

6:30 am on Jan 18, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



For people coming along later (i.e. after a moderator has deleted the link) this is what I see in two unrelated browsers:

-- At normal width, three side-by-side white boxes that spill below their intended containers. (This seems to happen because the white has fixed proportions while the background has an absolute height in pixels.) Tip: It's easier to see if you give
.container5
a for-testing-only border such as "1px dashed blue".

-- If I make the window narrower, it changes to three stacked boxes, no longer white but showing content, with no colored background.

-- Narrower still-- smaller than the actual size of the box's content-- and the three boxes disappear entirely.

-- Tiniest of all (I didn't realize this existed until I looked at the @media settings) and the content returns, now smaller.

min-width:769

769 what?

Are these the four @media settings? 
@media only screen and (max-width : 320px) {
@media screen and (min-width: 321px) and (max-width: 543px) {
@media screen and (min-width: 544px) and (max-width: 768px) {
@media only screen and (min-width: 769px) {

You don't need to repeat the entire CSS in each section. Only give the parts that are different. For example (I picked this one wholly at random): 

#horizon {
color: white;
text-align:center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#horizon {
color: white;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block;
}

#horizon {
color: white;
background-color: #0ff;
text-align: center;
<snip, snip, you get the idea>

What's any of that doing in an @media rule? With the sole exception of 
background-color: #0ff;

in the third block, everything is the same.

Normally you wouldn't need to give both min-width and max-width. Do you have some special reason for needing to do it here? If you list them from biggest to smallest, use max-width alone; from smallest to biggest, min-width alone.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / Mobile Web Site Design and Development 11:51 pm May 20, 2026