This should be really easy and basic but I can't for the life of me figure it out...
Very simple web page #1 is here:
http://www.lowhandicapper.com/ytlp04
I am trying to make a copy of it on a new domain with just minor changes to the link urls.
Here's the new page:
http://perfectimpactsystem.com/lp027
I can't seem to get the background image to appear on the pefectimpactsystem page! In chrome dev tools it shows the background link but it is crossed out with a yellow warning sign next to it.
Also in firefox the formatting is all messed up.
Please help!
In the background rule the first apostroph in the URL is actually a backtick (`). Replace it with an apostroph and it works fine.
In practice you can delete both the backtick and the apostroph since they're not required in a url(link) value.
This line is in your new site's CSS file:
background: url(‘http://perfectimpactsystem.com/wp-content/uploads/2014/09/bgTomIron.jpg') no-repeat center top;
Notice the odd characters at the start of the URL where the apostrophe should be.
Change your code to this, and you should be set:
background: url('http://perfectimpactsystem.com/wp-content/uploads/2014/09/bgTomIron.jpg') no-repeat center top;
Good luck!
Related
The image in the masthead of the Bootstrap Template is located in the CSS of the downloaded Bootstrap files, however, when i change the image url to the desired picture and save it, it does not change the image on the page and keeps the old deleted one, what's strange is that when i add the URL in the CSS file on Chromes Dev Tools the preview does exactly what i want it to do but when i do exactly the same on my actual code in the C9 workspace it does nothing and Bootstrap seems to always locate the old default image even though i have gone as far as to completely remove it from my Workspace? If anyone would point out where i am going wrong i would be extremely grateful.
The Bootstrap CSS
header.masthead{position:relative;background-color:#343a40;background:url(../img/bg-masthead.jpg) no-repeat center center;}
I am trying to change it to
header.masthead{position:relative;background-color:#343a40;background:url(http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg) no-repeat center center;}
It looks like 4usky.com doesn't allow hotlinking. You'll need to save it and load it from another location and reference that in your background URL.
Just put the url path inside quotes.
header.masthead{position:relative;background-color:#343a40;background:url('http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg') no-repeat center center;}
Hope it does the job.
I'm running into a problem with background image of an <li> loading in firefox.
my original code was:
background: #bdcad7 url(../images/navbg.png) repeat-x;
which works well in chrome and IE but not in FF.
background: #bdcad7 url(images/navbg.png) repeat-x;
also works in IE and chrome but not in FF
The only way to get it working in FF is if I include the next directory level
background: #bdcad7 url(/includes/images/navbg.png) repeat-x;
but that doesn't work in other browsers.
I've tried all variations I can think of ./, ../, include quotes, double quotes, use background-image etc and can't get it to work in all browsers. The relative path just seems to read different in FF (something I've never seen before)
What works in all browsers is having the full url of the image or an absolute path, but eachtake 3 lines on the text editor so I'd like to avoid it if possible.
Any insight as to why firefox is giving me a hard time would be appreciated.
I appreciate all the input.
To the best of my abilities I figured it's a problem coming somewhere on the server side along the directory path.
I've doubled and triple checked the css, tried every variation possible and can't duplicate the error on a test document.
I think the only option is to go for the full absolute path in case someone else runs into the same problem.
background:#F1F1F4 url(/dir1/dir2/dir3/dir4/includes/style/images/background.png) top left repeat-x;
The correct syntax would be
background: #bdcad7 url(../images/navbg.png) repeat-x right top
So you may have to add the last 2 arguments for it to work.
It would help a lot if you gave us the site structure.
Make sure the div containing the background has some height to it. Also, make sure the image filename is relative to the path of the CSS file.
More possible solutions can be found here - Background image is not displayed in Firefox
Try url('../images/navbg.png') with ' '. I do it anyway, and it doesn't seem to hurt, so maybe it will help? Worth a shot.
background: url("../images/navbg.png") repeat-x scroll right top #BDCAD7;
I had a page setup the way I wanted, with a logo absolutely positioned in the lower right:
http://testing.wizbury.com/onlinegamepage2.php?id=6
Then I added the following entry to the css, so that when a line of text in the box ran too long it wouldn't add so much extra space:
.ogfeatures li span {
vertical-align:middle;
display:inline-block;
line-height:1em;
}
That addition causes the logo to sit in the upper left of the content area (under the flash game). I can only post to links, but it is the same link as above, using onlinegamepage.php
The page dynamically generates a lot of content from a db, so Dreamweaver's preview doesn't work well. I decided to throw the code into fiddler and hard code things so I could play with the layout...and it works fine in fiddler, even with the spans added in.
http://jsfiddle.net/wrX8g/
So now I am completely befuddled. I'm sure there is something simple going on that I am missing, but I can't figure it out. I'd greatly appreciate any insight.
Thanks,
Doug
I'm not sure if StackOverflow is doing it or if it's in your original code, but when I copy your CSS into another file, after the closing }, there is a Zero-Width Space character, which isn't valid in CSS and, I believe, causing the declaration to be thrown out by the browser. I speculate that in whichever browser ytou're using, it's also throwing out all subsequent declarations, and that you've put that bit of CSS code right above the CSS declaration that positions the logo, thus preventing that declaration from taking affect and putting the logo where it would be without any applied CSS.
The fix is to simply remove the offending character, which you can probably do by putting your caret to the send of the line with the } in it, and backspacing. The caret shouldn't move, which tells you it removed an invisible character. If that doesn't work to remove it, you could also do it in a hex editor.
I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
I've downloaded a background image for my website, and for some reason or other, it's simply not being displayed.
This is the CSS code I've got:
background-image: url(Resources/Icons/background-image.jpg);
background-attachment: fixed;
I've even tried adding the full path name - to no avail.
The strange thing is that I've done this numerous times in my website, and all my images are displayed. It's only this that's giving me a problem - and there is no red cross showing that it cannot find the image - it just doesn't appear.
EDIT: For some reason, if I place the url of the webage where I got the image from, it works.
Any ideas?
Is your css in the same directory as your image? Probably not, I would assume. So you need to get back to the root and access the image properly.
Something like:
background-image: url(../Resources/Icons/background-image.jpg)
Unless your stylesheet resides in the same folder as you images, you should try navigating from the root:
background-image("/images/someimage.png");
Personally, I've found that navigating from the root of the application/site tends to be the most reliable/scalable option.
Wrong path probably...
background-image: url('/Resources/Icons/background-image.jpg');