Member Avatar for chaosapostle

Hello. I hope this is the right section to ask this question. I need some help with my coding. I've been working on trying to write a div code so I could modify my myspace profile, because it is a good hands on enviroment for playing with HTML and I can show off a little as far as graphics are concerned and arranging elements. Anyway, everything was going good untill I tried to add in some coding to work a BG image over one div. I built my code up from fragments. I used some codes to hide tables of my base profile layout and then overlap it with a div, without covering ads, and still covering up the remains of what I could not hide of my profile. I then used a basic profile editor code to add basic colration to what I was too lazy to figure out how to color (which I'm not sure if it is creating a conflict or not). I have divs after this coding and so far I've been able to add in scroll baoxes, images, text, edit bg color, transparency, and move them around. I proceeded to just add in the line:

background-image:url("");

That didn't work, the BG color stuck and the image didn't load. I tried a gif image and even a jpg image to see if that would change the result. I looked back on onther div works I made a year ago to confirm that one part of the code was correct even, because I figured if the code for images as backgrounds of divs worked before, must that line be faulty then? I added in the extra details to signify repeating backgrounds, and even background possition. The only thing I can assuse is that either the code is faulty or maybe I have to give the background image a margin left and margin top code, but I'm not sure exactly why the image would require that information to possition itself in line with the div, as if it was not in line I'd have figured the image to show up overlapping another div or something like layers.


here is the code I'm using:

about me section (hide code)

<br />
<style type="text/css"> .mainhl { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;} </style>
<p>

I'd like to meet section (2nd part of hide code)

<DIV class="mainhl"></p>
<table style="width:800px; height:750px; cellpadding:0px; cellspacing:0px; border:0px solid 000000; background-color:000000;}">
<tr>
<td valign="top"></td>
</tr>
</table>
<p></DIV></p>
<div style="display:none">
<table>
<tr>
<td>
<table>
<tr>
<td>

Heros section (editor code and my divs)

<style type="text/css">

.hot-lyts { Created using Hot-lyts.com - www.hot-lyts.com }

.hot-lyts1 {content:"background properties";}

body {
	background-color:000000;
	background-image:url();
	background-position:default;
	background-attachment:fixed;
	background-repeat:no-repeat;
	cursor:;
}

.hot-lyts2 {content:"Table properties";}

table, tr, td { 
	background-color:transparent; 
	border-style:none; 
}
table table { 
	border: 0px 
}
table table table {
	background-color:404A58;
	background-image:url();
	background-position:Top Center;
	background-repeat:no-repeat;
	border-color:;
	border-style:solid;
	border-width:;
}

table table table table { 
	background-image:none; 
	background-color:transparent; 
	border:none; }



.hot-lyts3 {content:"Text and Link properties";}

.orangetext15, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext {
	color:A0F707; 
	font-size:12pt; font-style:normal; font-family:,arial,verdana,sans-serif;} 

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, 

a.searchlinkSmall:visited { 
	color:A0F707;
	font-size:10pt; font-style:normal; font-family:,arial,verdana,sans-serif;}

a, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, 

a.text:link, a.text:visited, a.text:active, a.redlink:active, a.redlink:visited, a.redlink:link {
	color:FAB607;
	font-size:10pt; font-style:normal; font-family:,arial,verdana,sans-serif;}

a:hover, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.searchlinkSmall:hover, 

a.searchlinkSmall:active, a.redlink:hover, a.text:hover
	{color:FAD307; 
	font-size:10pt; font-style:normal;
	font-family:,arial,verdana,sans-serif;
}


body, div {
	scrollbar-face-color:057AF7;
	scrollbar-3dlight-color:035FC2;
	scrollbar-shadow-color:035FC2;
	scrollbar-darkshadow-color:070707;
	scrollbar-arrow-color:7CFA08;
	scrollbar-track-color:474746;

}

img{border:0px;}

.endhot-lyts {content:"www.hot-lyts.com";}


</style>



<div style="width:250px; height:500px; position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:190px; text-align:center;background-color:161C34 !important;"><br>My General Intrests Are:
</p>
<div style="margin-left:20px; width: 200; height: 50; background-color: 414A59; font-family: arial; font-size: 11px; color: F9B607; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: C2F707; overflow: auto; padding: 5px;">TEXT
<br>IMAGES
<br>SURVEYS
<br>WHATEVER
<br>HERE</div>
<p>
<br>My Music Intrests Are:
</p>
<div style="margin-left:20px; width: 200; height: 50; background-color: 414A59; font-family: arial; font-size: 11px; color: F9B607; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: C2F707; overflow: auto; padding: 5px;">TEXT
<br>IMAGES
<br>SURVEYS
<br>WHATEVER
<br>HERE</div>
<p>
<br>My Movie Intrests Are:
</p>
<div style="margin-left:20px; width: 200; height: 50; background-color: 414A59; font-family: arial; font-size: 11px; color: F9B607; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: C2F707; overflow: auto; padding: 5px;">TEXT
<br>IMAGES
<br>SURVEYS
<br>WHATEVER
<br>HERE</div>
<p>
<br>My Video Game Intrests Are:
</p>
<div style="margin-left:20px; width: 200; height: 50; background-color: 414A59; font-family: arial; font-size: 11px; color: F9B607; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: C2F707; overflow: auto; padding: 5px;">TEXT
<br>IMAGES
<br>SURVEYS
<br>WHATEVER
<br>HERE</div>
<p>
</div>


<div style="width:250px; height:60px; position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:130px; text-align:center;background-color:414A59 !important;"><br><font size=4>CHAOS APOSTLE</font></div>



<div style="width:550px; height:300px; position:absolute; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:390px; text-align:center;background-color:161C34 !important;"><br>
</p>
<div style="margin-left:20px; width: 500; height: 250; background-color: 414A59; font-family: arial; font-size: 11px; color: F9B607; font-weight: normal; font-style: normal; text-align: left; border-width: 1px; border-style: solid; border-color: C2F707; overflow: auto; padding: 1px;"><br><center>HOME | ADD | MESSAGE | FAVE | PICTURES | COMMENTS | FRIENDS | BLOGS</center>
<br><br>Hey!</div>
<p></div>


<div style="width:550px; height:260px; position:absolute; z-index:2; left:50%; top:0%;
margin-left:-150px; margin-top:130px; text-align:center;background-color:414A59 !important;"><br>image here</div>


<div style="width:800px; height:60px; position:absolute; z-index:2; left:50%; top:0%;
margin-left:-400px; margin-top:690px; text-align:center; background-color:transparent !important; background-position-x:center; background-image:url("http://i225.photobucket.com/albums/dd57/chaos_apostle/bottom-bgpart.gif"); overflow: auto;
background-repeat:repeat;">bottom div</div>

I appreciate any advice/help to fix my error. My goal was to find a way to hide everything on a myspace profile for the exception of everything above the top nav links (when no code is used to hide them) so that I could just edit the page BG and use divs to arrange my profile, with the divs having BG images attached for presentation, so I have more options to be creative. I was happy to figure out that I could do the divs like I did in the first place, I'm just not sure where to go to now that I have this problem with attaching BG images. Again, thanks for any help/advice.

- Brett

  • 2 Contributors
  • 1 Reply
  • 111 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

was on the right track using positioned DIVs to build a custom layout; as noted there are parsing/syntax issues that will stop the browser from ever reaching the background declaration. Beyond simple typos, the things that most commonly prevent a background-image from showing are: a stylesheet parse error earlier in the rules, the image URL being unreachable or blocked, the element having no rendered area (zero width/height or entirely covered), or the hosting/site editor sanitizing or modifying your CSS. Narrowing which of those is the problem will save time.

A short troubleshooting checklist:

  • Isolate the problem: copy a minimal HTML file (one DIV) and the minimal CSS to your local machine or a raw HTML host and test there. If it works, MySpace/profile filtering is likely altering your code.
  • Confirm the image URL is directly reachable in the browser and not blocked by hotlink protection or mixed-protocol (http/https) rules.
  • Use the browser inspector (Network and Styles/Computed panes) to see if the background declaration is parsed and whether the request for the image returned 200 or 404.
  • Ensure the element actually renders (nonzero width/height) and is not fully covered by another element with higher stacking context.
  • Run the CSS through a validator and look for an earlier parse error that might stop later rules from applying.

A minimal test pattern (replace the URL and dimensions) to verify correct syntax:

.profile-test {
  width: 800px;
  height: 300px;
  background: #111111 url('https://example.com/bg.jpg') center top no-repeat;
  position: relative;
}

If the test file shows the background but the profile does not, the profile editor is the choke point — try simpler inline styles, avoid unusual properties, and test different hosts for the image. For reference on valid background syntax and debugging with devtools, see the MDN background-image guide (MDN background-image) and the Chrome DevTools network/inspector docs (Chrome DevTools Network).

Member Avatar for MidiMagic

Syntax errors:

- You broke the body style with the cursor style without any attributes.

- You broke the body style by not putting the # on the beginning of the color string 000000

- There is no url string in the url function.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.