Now, I have a website which is from my previous co-worker.
I get some issue about resizing the browser window.
In other words, I want my website to resize nicely when I resize the window, rather than having buttons, divs and all the rest to overlap and go crazy.
this is my website.
http://50.62.140.177/foxcode/index.html
What I would like to do is something similar to this say http://antobbo.webspace.virginmedia.com/photography/home.htm, you make the windows smaller and everything resizes ok.
Has that something to do with height/width/padding/margin using percentage instead?
I really don't know where to start from, so any hint or link to relevant resources would be great.
i can use chrome to check that.
open in chrome your website then click F12 for the debugger.
know in left down you got eyeglass click on it and then click where you want to change the size and in the right you can change it and see what append change on your web source..
Just add min-width: 768px; to both green divs. simple and quick
Like other people said, min-heights and min-widths.
What I would also suggest is that you use a different technique for your full-screen background image. It seems to mess up when resizing.
Try using this;
html{
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 the best practice for full-screen backgrounds. More info from CSS Tricks.
This is just as easy as setting the html, body to auto and add a min-width of 960px
so something like:
In your header you put:
<meta name="viewport" content="width=device-width">
And in your css you do:
html {
width: auto !important;
min-width: 960px; // this depends on the width of your website, the example you provided is 960px
/*rest of code*/
}
See all the min-width options here
Hope that's it.
Related
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
On desktop everything is of, but if you check it on ipad or smartphone the Background does not works.
The client asked me for a full screen picture; On desktop is okay, but on Ipad, when you switch between Portrait and Landscape you need to refresh the page, and it's looks like "repeted".
How can i solve it?
Do you need to set section height via js? You can use CSS:
html, body { height:100%; } and #wrapper { height:100%; }
I've also noticed that you set the same background for body and #wrapper and it looks like it's repeated so delete bg from one of these elements.
It jumps because you set the wrapper height to the body height using javascript (but you don't update it on screen resize).
One option would be to update the wrapper height every time the screen resizes
Buy why don't you just remove the javascript and use css:
html,body,#wrapper{height:100%;}
Try this;
html {
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;
}
You need to take a look on responsive web design. Using RWD you can re-scale your image while working on different devices. Take a look on Media Queries. That will solve your problem and your website will fit within any device. Apart if you need anything you can ask.
body {
background-size: cover;
}
just add background-size to your body tag
My question is:
Is there any possibility to make something like responsive background ?
What I mean is if there is a possibility that if I go to my website from the mobile phone (e.g. 840px width) my background will automatically fit to my screen but other content from my website will have the same size? And other question is if I can stop it on... lets say 1920px width ?
I don't really have any code yet. I'm just asking. Thank you for your responses.
You can use
.class{background-size:auto auto;}
#media screen and (max-width 1920px){
.class{background-size:100% auto;}
}
Its hard to fully understand what you're asking for here, but a general tidbit of advice: try out the css property background-size: cover. This will cause your background image to take up the entire width and height of its container, maintaining aspect ratio and cropping in either direction as necessary.
Its pretty smart, and has pretty good browser support. More info can be found at the link below:
ref: CSS-Tricks: Perfect Full Page Background Image
You can apply a fixed wrapper for the "background" image with 100% width/height. Tha bakground should be used as a normal image, resized according to it's parent wrapper. The content can be inside another wrapper overlaying the previous one.
You can use the css background-cover property as this will automatically re-size your image to fit the browser. If you could even use media query to serve up different sized image so it would take up less bandwidth and look better
html,body{
background: url(img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover;
}
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.
I have a mobile web application based on jQM. I have a background image with the following styles applied to it:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: cover;
}
The thing is, this works fine on iOS, Chrome for Android but on ICS native browser and Dolphin browser, the background sticks to the top of the page like this after scrolling starts:
After some action, (like tapping on an element, the background comes back to focus like this:
I checked on the internet, did extensive research but obviously Im missing something. These are the links of the solutions I've tried:
SO link 1
SO link 2
What you see on top (I mean the CSS) is the default un-edited style applied.
Note:
Ive tried supersized plugin as well, and it works for GingerBread devices and when the content in the page is static.
On ICS devices, I'm not able to scroll beyond the viewport if its applied to a page with dynamic content.
The same problem happens when I try to create an img tag in the body of the page with src set to the path where the image is located.
THESE PROBLEMS OCCUR ONLY ICS NATIVE BROWSER.
Please tell me if I'm doing something wrong. Is there a pure CSS solution for this? (Obviously something is hugely wrong)
Try this:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
background-size: cover;
}
The following CSS for "html" solves my issues with full page background images on Android devices:
html{
height:100%;
width:100%
}
body{
background-image:url(img/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
Hope that helps.