CSS image loading intermittently - html

I can't provide much info except that sometimes (maybe 1 in every 25 runs) an image that I call with CSS does not load properly. The image is there because if I hover my mouse over it it shows in certain places.
The HTML:
<div class="body-top"> blah </div>
The CSS:
.body-top {background:url(../images/top.gif) no-repeat; height:55px; width: 970px; margin:0; padding:0;}
It is running on Visual Studio's Development Server.
Any ideas?
edit: hovering over the image itself actually doesn't make anything appear, it's when i hover over a link that is on the image

It's hard to help without seeing the page, but.
Can you verify that none of the elements inside have a background colour?
Try adding this to test things:
.body-top *{background:none !important;}
Don't use this as final code, because the !important flag will stop any background working for elements inside .body-top

Related

CSS selector image not displaying in website banner or in Chrome's Developer Tools window

I am developing a website with a large banner that displays differently on each page. The background image is not displaying when I put the background image on the page selector but it will work on the main banner CSS code.
This is for my wordpress site (WordPress 5.2) running a completely custom theme developed from scratch by me. Running PHP version: 7.0.33.
.page-id-15 .bannerImage {}
.postid-15 .bannerImage {}
I have tried both background image and background color with Chrome Developer Tools not displaying that it is seeing this style.
I have confirmed the correct page/post id of 15.
I have put the background image/color into .bannerImage and it displays as expected.
Not sure what else to try. This should be easy.
/// This will display background image and/or color ///
.bannerImage {
/* Set a specific height */
height: 337px;
/* Position and center the image to scale nicely on all screens */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/// This will not display background image and/or color (showing color style) ///
.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///
<div class="bannerImage">
<h2>Contact Us</h2>
</div>
/// Word Press Admin URL to show correct page/post number ///
http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit
/// URL ///
http://box5308.temp.domains/~naiedmon/contact-us
I expect to see a banner that is 337px high with a width of 100% that is different on each page.
What I actually see is a blank white banner space with the H2 displaying.
Chrome only outputs the .bannerImage selector and not the .page-id-15 .bannerImage or .postid-15 .bannerImage selector.
***** updated *****
Below I have added the code I am seeing when I look at Chrome Developer Tools. Unlike the suggestions I completely agree with should work (I have tried), my selector tag of .page-id-15 .bannerImage {} is not be read by the browser and displayed. I did also attempt .postid-15 .bannerImage {}. This is where it has me stumped.
Screen Capture of Code from Chrome Developer Tools
WordPress sometimes re-writes your CSS. I had this problem before. try using "!important" in all of your CSS attributes. this probably works.
I have had to move on and find another solution to my problem. Unfortunately I have not been able to successfully work with page ids as CSS selectors. My solution around the problem was to add additional classes and call them that way.
Example being on my about page to make a selector .about and attach my background image to that class. A simple fix but I was hoping to understand why I couldn't get the page id to work as a selector.
Onward and upward! Thank you to the community for your responses and attempts to help me out on this!
I was able to get help in the WordPress.org forum and so I thought I would put the answer here in case someone else has this problem.
What I did:
So, for some reason I decided to write my body tag like this (and continued to overlook the error):
<body class="body" <?php body_class(); ?> >.
I do not need to call the class "body". Once I deleted class="body" the correct body string was written and I can now call styles by page id.
The correct body tag in my case looks like this:
<body class="page-template page-template-page_fullwidth page-template-page_fullwidth-php page page-id-394 page-parent logged-in admin-bar no-customize-support" >
The exact advice I received:
The main problem is that you’re not calling the body_class() function
in your theme. Once you do that, the right body classes (like
page-id-15, etc) will be associated with the body element. Right now,
your body element looks like: <body class="topgradient">
If you change your site to another WordPress theme, and then inspect
the body element, you’ll see what it’s supposed to look like.
I am very thankful for communities like this and others!

White line appearing on all sides of web page

I'm sorry I cannot show you the code, it is currently on my localhost.
I am pretty sure I have correctly typed the code because Netbeans doesn't show any errors. I am making my parents website for their charity, Enough to Spare. When I load the webpage though, there is a white line on all sides (although you can't see the top line because that div is white)
Here is a screenshot.
Anyone have any suggestions?
I would recommend you use a reset.css file before your own.css, so you start with a blank slate.
You could always add -
html { width:100%; height:100%; margin:0 padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
http://www.cssreset.com/ - This is where I look to get my reset.css file
Thank you to Dan Ovidiu Boncut for reminding me to put in margin:0; and padding:0;!
Ninja edit: Have you tried using the Chrome Developer Tools? You can play with the css using that. Right click on an element and click on inspect, there you can add new css styles and edit your current ones. It is a brilliant way to find solutions to your css issues... it also shows you what line in your css file you're at, so when you come to make the changes in file you know where to look straight away! :)
In the CSS, try changing the padding of the container <div> to 0, because anything inside a <div> is also inside whatever padding it has, resulting in space between the padding and the border. Also try changing the margin to 0, because having a margin will result in space between the border and its container.
If you don't have a container <div>, or this didn't fix it, try setting the padding of the <body> tag to 0, because it's the outer-most container and might have default padding.
I also think there might be alternative ways to set background contents to ignore padding. Unfortunately, it's been a little while since I've worked in HTML and CSS, and I don't currently have time to experiment with that. But see what you can do with the above suggestions.
The fact that NetBeans doesn't show errors doesn't mean your presentation is the way you want it to be.
Check your containing divs. Check for any margins and/or paddings that could cause spacing. Borders as well.
If all fails use a CSS reset and check again.
You need to copy and paste the html and css involving your page elements, otherwise no one will be able to help you. Having your code on localhost has nothing to do with that.
The only thing that solved this problem for me was adding
body {overflow-x: hidden;}
to my CSS file. Once this works, I guess you can remove:
html { width:100%; height:100%; margin:0px padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
And also: quick tip for beginners: always use Command + Shift + R for a hard reload instead of a normal Command + R while testing solutions.

Background Image to appear on Hover

I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}

A simple tab implementation with <ul><li> but how to set tab background-image?

I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)

How do I add a hyperlink to a background image?

I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.