I am trying to use a free web template. But I cannot figure out how can I fix the background image. Does anyone give an idea to solve this problem. I wanted to show the code but don't know which part to give.. I can show this on desktop with no problem.
set the height & width = 100% also div's too
Try having a look at the css3 background property
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;
}
I am sure it solves your purpose.
Have a look this link for detailed info
http://css-tricks.com/perfect-full-page-background-image/
Also as Syed mentioned, study about responsive design or stick to some framework like Bootstrap.
Related
I'm using Bootstrap 3 for my interface page on a site i manage. I set my full page background image using this CSS:
background-image:url('/path/to/image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
It works great... On desktop. On mobile, the image gets resized to to a very small resolution and it gets pushed up, above a bootstrap 3 panel.
Here is a picture. On desktop, the picture covers the full page.
And here is a jsfiddle.
The thing is that it works great if i remove the bootstrap code; for example on another page not using bootstrap, the same CSS is used. The image scales nicely on desktop and on mobile.
What could be the problem?
Thanks
I am not sure, but maybe depending on the browser you are using on the mobile phone?
Try adding:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I might be wrong, but worth a shot.
Hope it helps.
Finally i used; <img src="/resources/ui_bg.jpg" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;" alt="">
Thanks guys!
Here is what I am looking for: http://tinyurl.com/oe3ydvr. No matter the size of the window the html adjust's to fit and appear perfectly. I have examined the css code but I still can't figure it out. I read somewhere to do as follows:
<style>
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;
</style>
Everything I have attempted has fallen short. I would really appreciate some closure on this issue, Thanks jmr333:)
well, there are a number of things going on here, the main slider container slider1_container is being ajusted to pixel-size that fits the viewport with javascript (with an img tag inside). The text blocks are not text, but images and scaled that way - a very bad practice from many standpoints. Your code relates to how a background image could scale "in a good way" while resizing the viewport
You can't style the background of your site like shown in your sample code, with properties directly on base level of your script tag. You always have to style a particular html element, i.e. div, or body or html, and assign properties in that context:
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;
}
See w3schools for examples on the background attribute.
In the mentioned site, there's actually complex javascript at work to style the top banner's (#slider1_container) width. This is easy to spot, because its inline css attributes get dynamically adjusted, while you change your browser window's width...
As a much simpler start, start with max-width: 100% as shown here.
I am guessing, most likely you'll want to start with a particular 100%-width-div (and certain elements on top), not the overall page background. (There is no need for javaScript on these basics )
This may have been asked before, but I am doing an html project and I need to have a fixed background with everything else scrolling. All the solutions I have come by involve javascript of Jquery and I would like to not use either but if it is the only way I might have to. (keep in mind i have very little coding experience with javascript or Jquery)
One example of a fixed background with scrolling content like i intend is shown here.
http://www.teamunify.com/Home.jsp?team=ohossc
-thanks!
You can, potentially, use:
background-attachment: fixed;
In concert with whatever other CSS you're using to style your content.
References:
background-attachment.
My friend, that is ultra easy, at least check the internet.
<div id="background-image">
<div class="your_content">
</div>
</div>
CSS
#background-image {position: fixed;}
No need for Jquery
This should do the trick:
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;
}
Taken from here:
http://css-tricks.com/perfect-full-page-background-image/
Replace the url to the relative or absolute path of your image.
I hope somebody can help me here.
I set a background-image, which I want to cover the whole site.
Which is why I used:
html {
background: url('../img/bg/girl_on_sunny_day.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Although I want the background-image to cover the view, I don't want it fixed. That means, if you scroll down, the image shouldn't be visible anymore. I guess this isn't possible and the only possible way would be, to have a big div-tag, with 100% width and its own background-image. Right? Now that I am writing about it... I guess I am going to test it out. Please forgive me for simultaneously hitting the "Post your Question" button.
http://jsfiddle.net/6L9uH/
Also I have an h1-Tag, exactly under the navigation bar, but it doesn't show up as an h1 Title and I have no clue, why.
Instead of background-size: cover use background-size: 100% auto. Adjust the height property according to taste.
I created a background for my website using CSS code it successfully worked but the problem is once I run it on different screen whether it was big or small I don't get similar consequences. When I run it on 13 inch screen the browser zooms in and the form what I get is probably not the same as in 18 inch well it obviously wouldn't have the exactly form but more or less I need it to be shown look-like. any suggestions? thnx in advance
body {
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
}
An addition problem I have now is that the background isn't full-screen. its resolution is 1920x1080, though I can see the picture on the whole web browser page but still I couldn't see other details of the photo.
I think you need
background-size: cover;
There are some browser inconsistencies, which might mean it is better to use a jquery plugin.
Have a look at http://srobbin.com/jquery-plugins/backstretch/ it allows you to use a background image which resizes depending on the size of the screen. It also deals with IE. Nuff said.
Also look at http://css-tricks.com/perfect-full-page-background-image/
I'm not 100% on what you are trying to achieve but the above links are worth a look.
This is the css3 way
html {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}