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!
Related
Heres my website: www.ChrisStephensMusic.net
As you can see the background image is not full size and moves when the page is scrolled. I'd like it to be full size and remain still while the content scrolls. I've tried the CSS suggestions I could find when searching this topic here but they do nothing when I add them to the "Custom CSS" on Blogger. Is there a better way to fix this using HTML or is there something else I need to do to get the custom CSS to be recognized?
Try using this code in your css file for the background image:
width: 100%;
background-size: cover;
background-attachment: fixed;
CSS
html {
background: url(image.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
source: https://css-tricks.com/perfect-full-page-background-image/
Add the following CSS -
.bg-photo-container, div.bg-photo-overlay {
height: 100%;
position: fixed;
}
The custom CSS option is not working because some invalid rules have been added to it, which is causing every rule after that to be ignored. I would instead suggest, adding this via HTML/JavaScript gadget by wrapping the code in a style tag so that it looks like
<style>
.bg-photo-container, div.bg-photo-overlay {
height: 100%;
position: fixed;
}
</style>
The final result should look like -
How to fit a background image in html without it repeating to cover the whole page? Is there a HTML code for it or do I have to use a CSS code?
There are two CSS properties you can use to control the size and repetition of a background image:
background-repeat
background-size
In order to set as a background image that covers the target element, you would use the values no-repeat and cover, like such:
targetelement {
background-image:url('example.jpg');
background-repeat:no-repeat;
background-size:contain;
}
If you'd like to learn more about these CSS properties and their possible values, have a look at these two pages:
https://www.w3schools.com/cssref/pr_background-repeat.asp
https://www.w3schools.com/cssref/css3_pr_background-size.asp
The best solution for your question is adding background-repeat:no-repeat or background-size: cover to your CSS or your element's style tag.
For example:
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;
}
If you insist on using HTML only, you would have to resize the element according to your image, or the other way around. Your question refers to a page's background image, so for my openion CSS or style is the only way to achieve this.
I am new and I try to learn on how to use html and css.
I know that it is possible to have the whole style of a page (example background image, help buttons etc. ) in order to avoid the overload of the page / cache problem.
Is there any simple example for beginners to learn to use it?
If you're looking to have a full size background image then you can check out this neat little tutorial for Perfect full page background image.
Make sure you have your basic HTML file and add the <style> tag within it, so,
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
</body>
</html>
simply replace background: url(images/bg.jpg) to the location of your image file.
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.
I have a large image that I want to set as the background for a 404 page. I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. The height should change based on the width, it doesn't need to be the height of the page.
I don't have the code for this. Would it be better to do it in the HTML file or the CSS file?
Can you possible create a JSfiddle that could serve as an example? Thanks!
Just add this to your CSS code...
body {
background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
background-size:100%,100%;
}
And then create a body...
<body>
Dummy Code
</body>
jsFiddle
This is best left to CSS. Hard to tell without your code exactly, but the following should do what you want:
CSS
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;
}
#background {
width: 100%;
height: 100%;
background-image: url('http://www.placekitten.com/200/200');
background-repeat: no-repeat;
background-size: 100%;
}
HTML
<div id="background">
<div id="content">
Hello world!
</div>
</div>
UPDATE
See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/
UPDATE #2
I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same image to every page referencing that CSS file. Should you choose to use a single CSS file for your entire website, my code above will make it easier to have different background images for the 404 page and the rest of the site.
HTML Body content
none
CSS
html {
background: url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo(updated)
I think what you are really looking for is a background-attachment property.
body {
background-image:url('http://IMAGEURL');
background-attachment:fixed;
width: 100%;
}
You dont need to setup height property here, it's done for you automatically.
How about this:
body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}