A background image not displaying

HTML & CSS
1

This is a bit odd. it is of course displaying on my sandbox.
only partially displaying in firefox and in chrome

this is the css


#wrap {
margin: 0px auto;
background-image: url('coreImg/aeronautical02WebSizedXpr.png');
background-repeat: no-repeat;
background-position: top right;
}

another background image, the orange transparent texture displays just fine.

the code is the same.

both images are uploaded to the appropriate folder
the site is www.thebigmeow.us

Any advice is appreciated.
Thank you

2

never mind…now it shows up…

3

I noticed the horizontal scroll bar.

Since block objects normally take up the full width of their container, I looked for a container with a {width:100%} assignment plus horizontal padding or margin. It was a good guess :slight_smile: .

The <header> tag and each of the 3 nested rows have been assigned a width of 100% via class=“row-fluid”.

<div id=“topLogo” class=“row-fluid”> has {margin-left:110px} added to position the logo away from the left edge.

If you delete the class=“row-fluid” from div#topLogo, the scroll bar will go away.

Hope this is helpful.

4

Howdy RonPat!
Absolutely will try and see what haps.
Kinda brings up a second question that has been in my mind about boostrap though.
As it is supposed to be run on a grid system. What would be the bkm in case of paddings or margin throwing things off.
And also let’s say I wanted to position an element. (on top of the slider for example)
I was going to create a div, place it at the bottom, below the container and then position it with relative /absolute settings. But how would that affect it when resizing the browser?
D

5

ok…didn’t do it. but it was good to learn.

6

Sherpa, you’re a fast moving target :slight_smile:

#topLogo is working fine because the class .row-fluid (and thus, width:100%) has been deleted.

Things have changed since I posted that message, but the lesson (same as Ralph’s) is sound.

Just an FYI: If you are having any difficulty trouble-shooting, it MAY be because some properties exist in the bootstrap.min.css file AND in your local style.css. That can be confusing.

.row-fluid seems to do two things:
(1) apply a width:100%
(2) apply a clearfix

The clearfix you probably need if inner boxes are floated, but the width:100% is causing you some grief because any padding or margins added to those containers makes the effective width wider than 100% and triggers the horizontal scroll bars. Remember, block devices (divs, etc) occupy the full width of the page by default, so in most cases, forcing width:100% is unnecessary.

You seem to have applied .row-fluid in a bunch of places. I speculate that most of them are probably unnecessary. Declaring a div to be “row-fluid” doesn’t make it more fluid, so I’m a little puzzled by what appears to be the inordinate use of “row-fluid”. Doesn’t bootstrap allow you to apply clearfix without width:100%?

Take a look at the items that I’ve marked in red. If they are deleted or commented out, the horizontal scroll bar is no longer triggered.

<div id=“content” class=“row-fluid”>
style.css (line 146)


#content {
    background-image: url("coreImg/xprtBgroundOrange.png");
    [color=red]border: 2px solid #D4D4D4;[/color]
    border-radius: 10px 10px 10px 10px;
    min-height: 600px;
}

<div id=“wrap” class=“container-fluid”>
bootstrap.min.css (line112),
style.css (line 80)


.container-fluid {
    [color=red]padding-left: 20px;
    padding-right: 20px;[/color]
}

I don’t speak bootstrap grid, so test try these suggestions with an open mind. They worked for me when I tested them in Firefox.

7

Hi RonPat!
I usually try to follow up on advice in a timely manner :slight_smile:
You are most likely right about the superfluous extra “row-fluids” I have done a couple of series of tutorials and they were not very clear on that. So some of this is learn as you.
Will try what you advised, thank you
D

8

oh yeah…I think one of the tutorials advs two css. one w/your code that would not get updated or written over and the regular on in the css folder.

9

Yes, “core” plus “local/customized” css files are pretty much the norm, but there should be no need to duplicate any of the code in the “core” css file(s) into your customized file. Because css files and their properties cascade, duplicated styles can cause annoying debugging headaches.

Let us know how you’re progressing.

10

slowly but better thank you to your advice. I did get the display to go from edge to edge of browser and thanks to this bit of code

			<?php query_posts("post_per_page=2"); the_post(); ?>
			<?php the_date(); ?>
			<?php the_post_thumbnail(); ?>
			<h4><?php the_title(); ?></h4>
			<?php the_excerpt(); ?>
			<a href="<?php the_permalink(); ?>" class="btn btn-mini">read more</a>
			<?php wp_reset_query(); ?>

my thumbnails are showing as well.
will have to post on the wp forum to understand just how a couple of those lines work. but hey…progress if not perfection :slight_smile:
Thank you RonPat!