8 Replies - 713 Views - Last Post: 03 February 2014 - 02:03 PM

#1 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

EZ one? Background image doesn't render

Posted 31 January 2014 - 03:08 PM

Greetings Coders,

Looking for guidance on things to check to make this simple code work the way I think it should. Probably an easy problem for someone out there.

Problem:
I'm using the background image property in a css sheet id style and applying it to a <div> tag, but it doesn't display.

  • The parent gridContainer block is set to Maxwidth 1240px
  • The image is a 1240px x 100px .png
  • The style for the navigation panel div container #navBar
  • <div id="navBar"> is the immediate child of <div class-"gridContainer>, as far as I can see there are no inherited conflicts.
  • I also tried removing the background image property from the #navBar style and placed it directly into the html div (with the correct syntax). That didn't work either.
  • When I place the image inside the div as amage content, it displays okay. Don't know if this tells you anything useful.


So, what things would a good coder check to resolve this issue?

Here's the code:

<!--main.css page-->

body {
	background-color: #000000;
	font-family: dinerswanky, Arial, Helvetica, sans-serif;
}
.gridContainer {
	width: 100%;
	max-width: 1240px;
	margin: auto;
	background-color: green;
}
#navBox {
	background-color: #FF0000;
	background-image: url(_images/main/navPanelDummy.png);
	width: 100%;
	display: block;
}





<!--index.php page-->
<body>
<div class="gridContainer clearfix">

  <div id="navBox">
      <!--This is content for navBox-->
  </div>
  
</div>
</body>




Thanks in Advance,
Mick

Is This A Good Question/Topic? 0
  • +

Replies To: EZ one? Background image doesn't render

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 8375
  • View blog
  • Posts: 31,132
  • Joined: 12-June 08

Re: EZ one? Background image doesn't render

Posted 31 January 2014 - 03:14 PM

Quote

15 background-image: url(_images/main/navPanelDummy.png);

Typically quotes, or tick marks, go around the string in the URL("...").
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: EZ one? Background image doesn't render

Posted 31 January 2014 - 03:24 PM

View Postmodi123_1, on 31 January 2014 - 10:14 PM, said:

Typically quotes, or tick marks, go around the string in the URL("...").

From HTML5 quotes are no longer required although, personally, I ALWAYS use them.

@OP Your divs have no content and therefore no height.
Was This Post Helpful? 1
  • +
  • -

#4 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: EZ one? Background image doesn't render

Posted 31 January 2014 - 03:33 PM

Thank you both for your input.

I placed some text inside the div to give it some content. The div block now displays correctly showing the red background color and the text, but not the background image. This tells me the #navBar styling is being applied alright, at any rate.

I tried placing both tick marks and quotes around the URL but see no effect from either tweek.

Is it possible my div content needs to be same height as the background image for the image to fit?

Mick
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: EZ one? Background image doesn't render

Posted 31 January 2014 - 03:58 PM

I will guess that the image displays if you insert it directly into the html because the path to the image is taken from the current page's location. When you use the image as a css-background the location is taken from the location of the css-file.

That is, if you are using an external css-stylesheet, and this is in a subfolder, then you'll have to come back a folder-level to find the image:
background-image: url('../_images/main/navPanelDummy.png');

You should also check your browser's console for an error message, which it will show if it cannot find the image.

View Postagent46, on 31 January 2014 - 10:33 PM, said:

Is it possible my div content needs to be same height as the background image for the image to fit?

No, by default the background-image will start from the top-left corner and repeat.

This post has been edited by andrewsw: 31 January 2014 - 03:59 PM

Was This Post Helpful? 0
  • +
  • -

#6 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: EZ one? Background image doesn't render

Posted 03 February 2014 - 12:51 PM

Excellent!

You were correct about the relative location of the background image. I now have the navBar background image displaying where it should according to the navBox styling.

Thank you for your help. I'm learning as I go and the next pages will be easier to construct.

Mick

Here is my final code:

<!--main.css page-->

body {
	background-color: #000000;
	font-family: dinerswanky, Arial, Helvetica, sans-serif;
}
.gridContainer {
	width: 100%;
	max-width: 1240px;
	margin: auto;
	background-color: green;
}

#navBox {
	background-color: purple;
	background-image:url(../_images/_navBar/navPanelDummy.png); background-repeat:no-repeat;
	background-position: center;
	width: 100%;
	float: left;
	display: block;
}

<!-- /////////////////////////////////////////////////////////////////////////////////////////// -->

<!--index.php page-->

<body>
	<div class="gridContainer clearfix">

	<div id="navBox">
	     <p>This is content for navBox</p>
	</div>

	</div>
</body>


Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: EZ one? Background image doesn't render

Posted 03 February 2014 - 01:19 PM

Glad you sorted.

Piece of trivia: when the colour-numbers are doubled-up you can abbreviate them to three characters, #000000 can be #000.

Quote

The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

w3.org

However, because this only works for a small selection of colours and, more importantly, most people don't know that this can be done, it is not worth using ;)

PS I still prefer to quote urls ;)
Was This Post Helpful? 0
  • +
  • -

#8 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: EZ one? Background image doesn't render

Posted 03 February 2014 - 01:57 PM

Interesting trivia about the RBG colors. Generally I put in arbitrary background colors while I'm building up the code. That way, I can see the limits of the containers I'm using. Do you have a standard practice you use for coding colors in your completed HTML?
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,570
  • Joined: 12-December 12

Re: EZ one? Background image doesn't render

Posted 03 February 2014 - 02:03 PM

I don't have a standard practice for coding colours (not sure what this means). I do, however, use outline a lot so I can see the extent of the elements.

div {
    outline: 1px solid red;
}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1