I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.
body
{
margin:0px !important;
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;
width:100%;
height:100%;
}
This is generating a footer bug when I make the window smaller because the body is not on the whole width.
I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller:
http://websoftit.ro/lackoflove/about.php?active=1
i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png
You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.
The problem is actually caused by div#banner, which has the following style:
#banner {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 1040px;
}
Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.
Note:
The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.
The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.
document.onresize = function() {
document.body.style.width = document.body.scrollWidth+"px";
}
This can help you, when the document is resized, this callback reset body width to 100% of document's width.
Related
I am developing a website over at http://notice.byethost12.com . I have finished most of the work but I am getting problems in making any logo appear resize to fit in the grid for them. So are tall while some are wide. and if not most are just stretch. I am pretty new with this. So I'd be glad if you could help.
Well, since you're using a background image in your thumbnail-image class, you'll need to specify background-size and background-repeat rules.
Add this to your css:
.thumbnail-image {
background-size: 100%;
background-repeat: no-repeat;
}
Hope that helps.
I am having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
Any idea or explanation how they did the backgrounds of this site?
http://upcircuit.org/
Basically, a fixed background is the trick here.
But there are multiple backgrounds and I am trying to solve the tricks of this site :))
I tried scanning the page source but I have no idea how they did this.
They have panels that are the size of the window. Then what they are doing is setting a background image for each panel and setting its background-attachment: fixed so that it stays positioned relative to the window, not the div it is in.
I set up the fundamentals for you here: http://jsfiddle.net/Zc822/
body, html {
width: 100%; // Sets the html and body width and height
height: 100%; // to the width and height of the window.
margin: 0;
}
.panel{
width: 100%; // Sets each panel to the width and height
height: 100%; // of the body (which is set to the window)
background-repeat: no-repeat;
background-attachment: fixed; //Sets background fixed in window
background-size: cover;
}
Then you just need to specify a background-image for each individual panel.
Pretty sure this is what you are looking for.
What have you tried? Have you tried to use
background-attachment: fixed;
Hope this helps.
This is a parallax effect, which emulates a 3D space by having your foreground and background move at different speeds. It looks like images are perhaps swapped out and fixed at certain scroll spots. You'll need to use a little javascript, but it is not too difficult a trick to pull off:
Here's a library to help:
http://matthew.wagerfield.com/parallax/?utm_medium=App.net&utm_source=PourOver
Here's another neat site that does some neat things with parallax and scrolling: https://www.google.com/nexus/5/
It is parallax effect. Here are some tutorials:
http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/
http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/
http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
Here are some examples for inspiration:
http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
Thanks for any help. I'm fairly new to web developing and I've run into a strange issue on my site. http://bit.ly/1nnzqeB
The image that seems to be BEHIND it should be scaling to fit in the section, rather than what it's doing now. I've been stumped on this for hours and I feel that it's probably something stupid simple so I'm reaching out to the experts. Please help!
Well, im guessing you want this image to scale and fit the entire horizontal white space.
http://codesilver.us/wp-content/themes/SVG/img/slide1-1.jpg
After looking at your code, your .container needs to be 100% width
.container {
width: 100%;
}
After i applied this fix it appears to work, you may want to clean up your div structure a bit overall, but that's a different conversation.
UPDATE:
For re sizing you can use the css cover property for background-size: cover; this make sure the image covers the entire div and vertically and horizontally aligns the picture as well.
newheader {
/* background-size: 100px 100px; */
background: url("../img/slide1-1.jpg") no-repeat scroll center center;
margin-top: 5%;
/*background-size*/
-moz-background-size:cover;
background-size:cover;
}
Assuming this is actually how you want it to look, do two things:
Remove the background-size: 100px 100px; from the .newheader class
Add width: 100%; to the same class
I'm new to responsive design and CSS. It seems like a simple question but I can't get a straight answer from Google. I have tried http://css-tricks.com/centering-in-the-unknown/ The ghost block works perfectly but it leaves me a white background colour. Now I'm stuck. Basically, I have a logo size 534x385 and I want this logo to be centered on any devices. In the case of mobile phones I would like this logo to shrink to match the screen size as well.
<div>
<img class="logo" src="images/shapes-logo.png" />
</div>
.logo {
position: fixed;
top:15%;
left: 50%;
margin-left: -267px;
}
html {
background: url('../images/shapes-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's my CSS so far. But if I do this the margin-left: -267px will cause problems in mobile devices.
Resizing the Object
To change the CSS property when the screen resizes, you can use
element {
width: 100%;
height: 100%
}
You can specify your own values too to make them work. This way, everytime the screen shrinks the object or element gets smaller.
Other way, to get the mobile and tablets to get to work is the usage of CSS3 (Media Query)
Like this:
#media only screen and (max-width: 400px) {
/* here comes the trick..this is the css, which would be applied to all
* the devices whose screen has a max-width of 400px..
*/
}
You can then set some properties for it, lets say you can change the image width to
img#logo {
width: 50px;
}
So that, for smaller size screens the image width is just 50px.
Note that, this is also applied if the browser on desktop gets a width of 400px! This way, if the browser gets resized down to 400px width, the image will shrink to fit the place. In other words. Media Query is the best option to change the CSS properties depending on screen sizes. And again, you can use width: 100%.
To make the percentage thing work, you should use a container, such as div This way, the img will inherit the width of div and fill it. For example, if the div that wraps the image has 400px width, the image with width: 100% will have a width of 400% and so on.
Centering the Object
The best method to center the object is to use margins. But not custom ones, but the browse generated.
Lets say, you want to align some image in the center of the page horizontaly, you can achieve that using max-width: 100px and margin: 0 auto. Like this:
img#id {
max-width: 200px;
margin: 0 auto; no vertical margin, auto horizontal margin
}
This way, the object will be placed in the center and the browser will automatically generate the margins for it. The max-width is to make sure, that it takes just the space it needs to. I created a site a fews days ago, you can check the image at the end of the page here: http://www.aceinternationals.com
You will see the image was never provided any code that has to be kept in mind, it is just max-width and margin. So when ever you use the browser resize function, the image will always come to the center.
White background
White background might be because of the image's bckground color, or the background-color of the body! That might be inherited by the user agent (browser). I am not sure, why that happened! Sorry :)
Reference:
http://css-tricks.com/css-media-queries/
Good luck :)
My opinion is to add addition class with logo in html.
like:--
<p class="classname"><div class="logo"><img /></div></p>
.classname{ text-align:center; width:100%; }
This will always keep your logo in center.
if it won't solve. use these with above css.
margin-left:auto;
margin-right:auto;
And also add:
.logo{ max-width:100%;}
.logo {
width:33%;
background: url('your_logo.png');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
your container:
html {
margin:auto;
}
You can try doing something like this. If you post a link I can better help you.
You should simply use max-width:100% for your image. It will keep the image responsive.