I'm having a strange issue I just can't get my head around. On firefox and IE, my footer's background image displays fine, but on chrome, it only shows up when I start selecting the footer text, or when I refresh the page.
Here's the website:
www.josephviatte.com
here's the footer's CSS:
.site-footer {
background-color: #660000;
background-image: url("http://josephviatte.com/wp-content/uploads/manual-uploads/footer-bg.jpg");
color: white;
height: 260px;
padding: 50px 0;
margin-top: -5px;
margin-bottom: 0;
background-size: 100% 260px;
background-attachment: fixed;
background-position: 0 100%;
background-repeat: no-repeat;
}
Does anyone have a clue?
Thanks in advance!
Not sure, but I found something wrong:
.site-footer {
background-color: background-color: #660000;
this is invalid.
Finally, I decided to remove
background-attachment: fixed;
Of course, my background is a little sadder now that it scrolls, but at least it displays. Chrome seems to have something against fixed backgrounds...
Related
So I am coding a full width header tumblr theme and while everything's fine as far as the full width, as soon as I resize to a smaller screen, like on a mobile device or tablet, the header cuts off and it's no longer in full width. Example is
I literally tried everything, including resetting the css and I even went through every question on this site that deals with the same issue. I tried those solutions and neither worked so I really don't know what else to do or maybe it's possible there's literally nothing I can do about it as nothing has worked thus far. Here is the full code in case the issue is more than just the header.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #eee;
background-image: url('{image:header}');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
{block:PermalinkPage}
display: none;
{/block:PermalinkPage}
}
.topbar {
width: 100%;
height: 80px;
z-index: 220;
background-color: {color:posts};
border-bottom: 1px solid {color:post borders};
border-top: 1px solid {color:post borders};
{block:PermalinkPage}
position: fixed;
top: 0;
{/block:PermalinkPage}
}
`<header class="header"></header>`
Thank you so much
Screen size changes accordingly for every device. Thats why most developers use Bootstrap to avoid such issues.
But for your answer, try this in CSS :
background-image(your url);
background-size cover;
I have a PHPBB theme I am starting to construct. In the CSS file, I have three items--a body and two divs--with background images. The background images for the divs have ceased working in all browsers.
The site with the theme presented is here: https://www.tarazedi.com/index.php?style=7
The problem images are here: https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png
The CSS is located in wTcFresh/theme/.
The images are all in the same locations but there seems to be a pathing issue but is working very strangely. I have tried using both relative and absolute URLs. I have tried url(x);, url('x');, and url("x"); and also changing the other background elements. In no case have the banner and logo images started working, but the body image works fine despite being in the same place and using the same syntax. When I inspect the computed styles of the divs in Chrome the image will show as the full absolute URL correctly but the relative link links instead to tarazedi.com/images/site_banner.png which returns a 500 error because that URL is, obviously, useless. In Edge and Firefox the inspector shows the correct link to the image but still does not render.
I have cleared browser and site-side caches with each attempt I make to fix it.
I am baffled. What am I missing?
body {
color: #CCCCCC;
background-color: #000000;
background-image: url("images/bg.jpg");
background-attachment: fixed;
}
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("images/site_logo.png");
background-attachment: fixed;
background-position: left center;
vertical-align: middle;
}
To achieve expected result,adjust background-position and it is not issue with the background-image
1.Remove background:position to see the difference
Editing it thusly fixed the problem and it now renders correctly. Thank you very much!
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
background-image: url("images/site_logo.png");
overflow: hidden;
background-repeat: no-repeat;
background-position: left;
align-items: center;
}
This has been annoying me now for a few hours as I keep fiddling around with the code and don't seem to be getting anywhere at all.
I really like the way that this website has a fluid image background:
Here
I have downloaded the code and am not currently trying to make a slideshow, but instead a single image background that when you play around with the size of your browser expands and contracts the same way as in the website.
If i take the code that they use in their CSS and apply it to my own image I keep getting this instead.
https://jsfiddle.net/9cpz4gua/
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
}
Could someone please advise me what to do in order to get my background image to expand and contract about the center as the website does?
Here is my answer, it may not be the easiest or the most complete but it give a very beautiful looking result that answers your question
Basically, you create a new div directly under your body
and style it this way:
.bgimg {
z-index: 1;
background: url(http://dondev.ovh/light_abstract.jpg);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
See it in action
This is a css only answer, you can use JavaScript alongside for better result.
Regards
If all you want is to have your image always fill the page, just remove some things from your own style to achieve the "cover" effect.
Try this:
body{
background-image:url(https://blogs-images.forbes.com/ericsavitz/files/2011/03/smiley-face.jpg?width=960);
background-repeat:no-repeat;
color: transparent;
background-size: cover;
opacity: 0;
z-index: 0;
}
https://jsfiddle.net/9cpz4gua/2/
body {
height: 100%;
background-color: #f8f8f8 ;
background-image: url('images/bottom-right.png'); /*Images*/
background-position: right bottom; /*Positioning*/
background-repeat: no-repeat; /*Prevent showing multiple background images*/
}
so i have this code that put the image in the bottom right of the body, but the problem is its not positioning in the way that i want it. It goes to the right but not in the bottom. It's only as tall as the content inside it, just like a div or anything else. Can u please help me to achieve what i want.
here is the image -> http://tinypic.com/view.php?pic=2iabd3p&s=8 thanks
You also need to set a height on the html and remove the margin on the body:
body {
height: 100%;
background-color: #f8f8f8;
background-image: url('http://www.placehold.it/100x100');
background-position: right bottom;
background-repeat: no-repeat;
margin:0;
padding:0;
}
html {
height:100%;
}
jsFiddle example
Simply setting height: 100%; isn't going to work in all instances. While I generally dislike using CSS2 position too often this may help you in this situation...
body, html
{
bottom: 0px;
left: 0px;
overflow: auto;
position: absolute;
right: 0px;
top: 0px;
}
I've managed to get my header to work as a link in ff, safari and opera with the css image replacement
#header h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 15px;
}
#header h1 a {
display: block;
height: 120px;
width: 400px;
margin-top: -135px;
}
I'm trying to optimize the site its for in IE, my last step before I launch it on monday but the logo doesn't appear at all in IE 8 or 9, But it very surprisingly does in IE 7. I managed to get the logo to appear in IE9 by making the display inline-block
.ie9 #header h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 15px;
}
.ie9 #header h1 a {
display: inline-block;
height: 120px;
width: 400px;
margin-top: -135px;
}
bit the image is no longer a link when I do this, does anyone have any idea how to fix this? I would put the image in the HTML instead of using the image replacement but Its been hammered into my head that from an SEO standpoint using the image replacement is better.
I think it is the margin-top: -135px causing the problem. The height is only 120px so it will end up being -15px (height - margin) so disappearing underneath the bottom of the H1 tag.