Body background image and div background image

(@japanapproved)

Nope, wont find any image!

(@graycode)

doesnt it work with this path before the image? like for me…

wp-content/uploads/2012/11/african_maps.jpg

It works with the correct path…?

Thread Starter

(@japanapproved)

Was that a question for me?

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Okay, forget that tactic, that just means the URL you’re typing in the browser is wrong.

Can you use two PasteBin pages, one for your HTML and the other for your CSS, then link us the PasteBin pages?

You can find your HTML by right clicking on the website (assuming you’re using windows) and selecting ‘View source’. The pop-up window will contain your HTML.

(@graycode)

It was for Andrew, japanapproved… im having a very similar issue so jumping on this thread as I havent found an answer for my query just yet!

Thread Starter

(@japanapproved)

<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="https://127.0.0.1/fancyliving/wp-content/themes/renas theme1/style.css">
</head>
<body >
  <div id="wrapper" >
    <div id="header">
      <img src="

https://127.0.0.1/fancyliving/wp-content/themes/renas theme1/images/logo.png"/>
<div id="navbar">
<table width="525" border="0" cellpadding="0">
    <tr>
      <td width="71" class="style23"><img src="https://127.0.0.1/fancyliving/wp-content/themes/renas theme1/images/tophat.png" width="48" height="45" /></td>
      <td width="57">&nbsp;</td>
      <td width="59">&nbsp;</td>
      <td width="70">&nbsp;</td>
      <td width="80">&nbsp;</td>
      <td width="110">&nbsp;</td>
      <td width="62">&nbsp;</td>
    </tr>
  </table>
<table width="525" border="0" cellpadding="0">
    <tr>
      <td width="71" class="style23">Home</td>
      <td width="57"><span class="style20">Pics</span></td>
      <td width="59"><span class="style20">Vids</span></td>
      <td width="70"><span class="style20">Merch</span></td>
      <td width="80"><span class="style20">Projects</span></td>
      <td width="110"><span class="style20">The Fancies</span></td>
      <td width="62"><span class="style20">Contact</span></td>
    </tr>
  </table>

  </div>
    </div>
<div id="main">
<img src="https://127.0.0.1/fancyliving/wp-content/themes/renas theme1/images/frame.png"/>
<div id="sidebar">
  <h2 class="sidebartitle">Categories</h2>
  <ul class="list-cat">
    	<li class="cat-item cat-item-1"><a href="https://127.0.0.1/fancyliving/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (2)
</li>
  </ul>

  <h2 class="sidebartitle">Archives</h2>
    <ul class="list-archives">
      	<li><a href='https://127.0.0.1/fancyliving/?m=201211' title='November 2012'>November 2012</a></li>
    </ul>

		<form name="loginform" id="loginform" action="https://127.0.0.1/fancyliving/wp-login.php" method="post">

			<p class="login-username">
				<label for="user_login">Username</label>
				<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" />
			</p>
			<p class="login-password">
				<label for="user_pass">Password</label>
				<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />
			</p>

			<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
			<p class="login-submit">
				<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
				<input type="hidden" name="redirect_to" value="https://localhost/fancyliving/" />
			</p>

		</form> 

	</div>  <div id="content">

    <h1>Main Area</h1>
        <h1>Fancy Living Is BACK!</h1>
    <h4>Posted on November 30th, 2012</h4>
    <p><p>Stop! Fancy Time!</p>
<p>&nbsp;</p>
</p>
    <hr>
        <h1>Hello world!</h1>
    <h4>Posted on November 30th, 2012</h4>
    <p><p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</p>
    <hr>

 </div>

  </div>

<div id="delimiter"></div>

<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>

And CSS …

body {
    text-align: center;
	background-color: cccccc;
	background-image:url('/wp-content/themes/renastheme1/images/bg.png');
}

#wrapper {
    display: block;
    border: 1px #a2a2a2 solid;
    width:90%;
    margin:0px auto;
}

#main {
float: center;
}

#header {
    border: 2px #a2a2a2 solid;
	text-align: left;
}

#navbar {
	float:right;

}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Try using an image that’s available on the Internet, like my forum avatar;

background-image: url('https://www.gravatar.com/avatar/bbb23a24bb960546754e0fd4d7c1baee?s=48&d=monsterid&r=g');

You should be able to see my gravatar repeated on your website.

This narrows it down to 2 possibilities;
Your image path is wrong,
or,
That image has no readable permissions.

Thread Starter

(@japanapproved)

it worked just fine, so my image path is wrong?

Andrew Nevins

(@anevins)

WCLDN 2018 Contributor | Volunteer support

Or your image path is right and your image is set not to be readable (through permissions).

Thread Starter

(@japanapproved)

Im reading this but its kinda confusing, how would I change the permissions?

(@graycode)

I’ve just changed my permissions now and it works for me too, however, I changed it to 666 and it broke my site, i went back and changed it to 755 and now i can see you r background avatar!

I need to to check it without hardcoding the CSS and if that works… ??

Thread Starter

(@japanapproved)

figured it out…thanks so very much!!!!

Thread Starter

(@japanapproved)

Well not sure if i did it right…I just changed the permissions of the folder images to NOT read only….