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.
Related
I am currently using a template and there some code I don't understand
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1050');">
I don't want to mess up with CSS and I just want to change the code in HTML as you can see it is linked to online but I want to link to my local computer. i have html and all css and the picture but dont know how to link
You cans simply change this
background-image:url('http://placehold.it/1920x1050'); as per your requirements.
If you want to add image background then replace http://placehold.it/1920x1050 with your actual image path.
If you want to use color background then remove background-image:url('http://placehold.it/1920x1050'); and use background: red; Add your color or color code instead of red
Well first off, you need to download the image you want to link to your local machine and then reference that in your background-image inline CSS.
Have a look at this link hopefully, it helps.
https://www.w3schools.com/tags/tag_img.asp
To link to an image in your PC, you need to have the HTML file in your PC and to link the image location to the one on your PC. Example:
Let's say you have index.html and background.jpg in the same folder, then you use:
<div class="item owl-bg-img" style="background: url(/background.jpg);">
You can do the same by using CSS.
.item owl-bg-img {
background: url(/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
Assign the background to the entire HTML using CSS
html {
background: url(/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
Use the IMG tag. It is hard to set a background image to a DIV, it is also not recommended.
<img class="item owl-bg-img" src="/background.jpg">
Then you just add the CSS (width, height, etc) to the class "item owl-bg-img" like you would do to a DIV.
Another way if you really need that DIV,
<div class="item owl-bg-img"><img src="/background.jpg"></div>
This way the DIV will be the size of your image, otherwise resizing the DIV using CSS, will scale the IMG tag to fit the DIVs size.
Using CSS may be simpler than you think. Try adding this in the <head> and </head> tag of your HTML page:
<style>
.banner {background-image: url("http://placehold.it/1920x1050")}
</style>
And then put this where you want your image to show:
<div class="banner"></div>
Style as needed, add text, etc.
If you want to host the file on your own machine, simply replace "http://placehold.it/1920x1050" with something like "assets/pics/my_image.jpg".
Good luck!
On a small currently unfinished bootstrap site (www.ehrenamt-ladenburg.de) I am trying to style the background image differently for each actual html file involved.
In my stylesheet for additional styling beyond bootstrap_3_3_1.css I am setting up the background image as a background url as in:
html {
background: url(../images/tb20150807_210648_0216_8_0217_8_0218_8_0219_9_0220hdr-pm_1200.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This works for HTML as well as BODY elements - but not for DIVs or lower level elements (to cover the full background for a responsive page).
Initially I had thought of referencing an additional page-specific CSS file in each html file involved just to style the html background for each of the few pages of the site (which seem a reasonable way of getting things done).
A google search brought me to Stackoverflow and the "Page-specific css rules - where to put them?" thread (and caused me to sign up immediately because of the quality of the question and answer exchange I found).
Now the question for the experienced folks (I am still fairly new to serious bootstrap and css programming):
Couldn't I find a way to reference some sort of page ID in my css selectors to restrict a certain background image to a certain page?
So my question, I guess, is: how can I style BODY element (or HTML element for that matter) with an ID and reference it in a page-specific way? What is the syntax? Or what am I doing wrong?
With:
<body id="03_eal">
in the html file neither:
body#03_eal {
background: url(../images/tb20150614_081922_231.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nor:
#03_eal body {
background: url(../images/tb20150614_081922_231.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
in the css file work for me.
Leaving out the ID portion in the css, it works fine using either BODY or HTML elements.
What would be the syntax? Or what am I doing wrong in trying to select HTML or BODY using an ID?
Since the body has an id already. There is no real reason to include the tag selector in your css. ID's should be unique and using that specific id can be called just like this
#some-id {
someKey: someValue
}
And no need for doubt. If you have access to your pages, you are more than allowed to add a class or id to that page to make it standout visually different than other pages.
You can also wrap your content in every page with a tag and pass your class or id that way as well.
Ok so the reason it does not work for you is that you are starting your css id with 0 which converts to a number. Try removing the 0. Never start any css selector with a number. Try adding the number as a suffix and your issue will be resolved
Include your image in body and that will work fine. No need of including id or class in body just add below code. But keep in mind that you are using background image for your website, so compress its size. It shouldn't be much heavy in size.
body{
margin : 0; //optional
padding : 0; //optional
background: url(../images/tb20150807_210648_0216_8_0217_8_0218_8_0219_9_0220hdr-pm_1200.jpg);
background-position:fixed;
background-repeat:no-repeat;
background-size:cover;
}
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 )
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.
I'm making a pretty simple html page for Facebook, I want a big image as the background and little images as buttons all over the bg, I want to know how can I code the background and the "buttons" so these take you to a different page.
For buttons you just need to create the element, and then add in the link attribute.
So for creating a button that links to Google.com:
<button onclick="location.href='http://www.example.com'"> www.example.com</button>
Often people will have a div that contains that majority of their body of their html. So you can use:
background-image : url('image.jpg');
attached to your div or body tag.
A similar more thorough approach would be to just attach it to your html selector, like so:
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've made a FIDDLE to give you an example of how to use background-image, and a button that links to Google.
You can of course style any of these elements.