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.
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;
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/
Newbie here hacking away at this little project:
http://development.puretapecult.divshot.io/
And my question is, how do I automatically resize the .pngs in the center of the screen when the browser size collapses, or when it is viewed on a mobile browser?
Do I have to use #media queries for mutliple viewing sizes, and create multiple classes for each png?
Any help appreciated.
CSS classes that modify the images:
.spinner-outer {
display: block;
width: 327px;
height: 327px;
position: absolute;
left: 50%;
margin-left: -163px;
border-radius: 50%;
background: url(spinner-outer.png) center center no-repeat #32302e;
}
.spinner-center {
height: 200px;
width: 200px;
position: absolute;
background: url(spinner-center.png) center center no-repeat;
border-radius: 50%;
left: 50%;
top: 50%;
margin: -99px;
pointer-events: none;
}
.play-sprite {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
background: url(play-sprite.png) 0px 0px no-repeat;
height: 70px;
width: 70px;
}
I would use media queries to change the height and width of the divs. Note that you do not need to create multiple classes for different sizes. Just use multiple media queries like this:
#media (max-width: 768px) {
.spinner-outer {
width: 200px;
height: 200px;
}
}
You'll also need to specify that you want your background image to fit the size of the div or it won't change sizes when the div does. Use the CSS3 property background-size as long as you're comfortable not supporting old browsers.
.spinner-outer {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
More info on background-size and some alternative techniques if you want to support older browsers: https://css-tricks.com/perfect-full-page-background-image/.
Try somthing like this.
HTML:
<div class="image-wrapper">// Div will always re-size with page.
<img src="[src]" />
</div>
CSS:
.image-wrapper{
max-width:90%;
height:auto !important;
position: relative;
display:block;
margin:0 auto;
}
.image-wrapper img{
max-width:100% !important;
height:auto !important;
display:block;
}
Or you can use bootstrap and add a class to image like so.
.img-responsive
Makes an image responsive (will scale nicely to the parent element)
<img src="[src]" class="img-responsive" alt="[Alt]">
I have a photo background on my site using background-size:cover. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media uls.
I tested this by removing the ul and the background attached it self to the bottom of the tagline text.
Also, here's my CSS pertaining mobile portait view:
#media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.
Try add:
* { background:transparent }
right at the end & move your html { background:... } CSS after that.
This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.
Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.
Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:
background-size: cover;
min-height: 100%;
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