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;
Related
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/
:)
I have a responsive header.
Here's the code for the hero section:
.hero {
background: url(../../img/hero.jpg);
background-size: cover;
background-position: center center;
position: relative;
height: 100vh;
margin: 0;
#include breakpoint($x-large) {
padding-left: 5%;
padding-right: 5%;
}
It's all great and responsive; however, when I open the console on web or keyboard on android the vh doesn't change and the button and text elements stay shifted down.
I've tried adding padding and specific media queries and other solutions, but I cannot find a universal effective solution...
Why is this happening and how can I resolve this?
You need to attach .container-hero to the bottom of the .hero.
.container-hero {
position: absolute;
bottom: 5%;
}
You'll also need to fix your layout due to position: absolute;.
But you get the idea :)
<style>
div {
width: 100%;
height: 400px;
background-image: url('http://i.stack.imgur.com/gwAUR.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
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...
I have a client that wants the same image style effect as WooTheme's Duo Theme. I can easily achieve this initial effect:
------HTML-------------
<div class="home-banner">
</div>
-------CSS-------------
.home-banner {
height: 500px;
background-image: url("CLIENT'S BG IMG");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 9.505em 1.618em 11.089em;
text-align: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.home-banner:after {
content: "";
display: block;
height: 10em;
width: 200%;
position: absolute;
bottom: -5em;
right: -20em;
background: none repeat scroll 0% 0% #46535D;
border-radius: 100%;
transform: rotate(2deg);
border-top: 0.327em solid #F97960;
}
But there is one requirement that is killing the whole thing. The client's photo is showing staff members of their company. When the browser window is resized to simulate a tablet/smartphone, most of the image cannot be seen due to the css rule:
background-size: cover;
If I change this rule, the banner effect no longer works properly. I need all staff members to be seen on a small display. Imagine a staff member's head being cut off on their mobile device. That means that my head would be next. Any suggestions?
You can use a CSS media query such as
#media (max-width: 480px){
/*Place mobile CSS here*/
}
This way whenever a user looks at this on a mobile device this CSS rule will override the normal browser one... just place it after the normal browser styling.
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed