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.
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!
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.
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
its very simple
use this css (replace image.jpg with your background image)
body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
um why not just set an image to the bottom layer and forgo all the annoyances
<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
Via jQuery plugins ;)
http://srobbin.com/jquery-plugins/backstretch/
http://buildinternet.com/project/supersized/
Use this CSS to make full screen backgound in a web page.
body {
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use the following code in your CSS
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;
}
here's the link where i found it:
Make a div 100% wide and 100% high. Then set a background image.
A quick search for keywords background generator shows this CSS3 produced background pattern that's dynamically created.
By keeping the image small and repeatable, you won't have problems with it loading on mobile devices and the small image file-size takes care of memory concerns.
Here's the markup for the head section:
<style type="text/css">
body {
background-image:url('path/to/your/image/background.png');
width: 100%;
height: 100%;
}
</style>
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don't want 100% for width and height since that will stretch the image out of proportion. Instead check out this quick tutorial that shows different methods for applying background images using CSS.
CSS
.bbg {
/* The image used */
background-image: url('...');
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML
<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
I have followed this tutorial: https://css-tricks.com/perfect-full-page-background-image/
Specifically, the first Demo was the one that helped me out a lot!
CSS
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this might help!
I found the reason why there is always a white boder of the background image, if I put the image in a 'div' element inside 'body'.
But the image can be full screen, if I put it as background image of 'body'.
Because the default 'margin' of 'body' is not zero.
After add this css, the background image can be full screen even I put it in 'div'.
body {
margin: 0px;
}
i can get images scaled to fill the window when they are the content, like so:
(without any html5 or div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<img src="wacard.png" alt="original image" title="">
but
this fails (both "html, body" and just "body")
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<body
style="background-image: url(wacard.png);">
</body>
as picked up picked up from here: Resize HTML5 canvas to fit window but as far as i understand, that must have some more fancy code than i know of, going on, ... or i'm doing something wrong...
how can i get background images to scale?
(ideally, without javascript)
Here is a great tutorial with several solutions:
http://css-tricks.com/perfect-full-page-background-image/
Complete with demos and the step by step coding process.
The HTML5 way mentioned is:
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;
}
There is an ie fix mentioned in the article.
As I understand you want to create a full page re-sizable background. If so, follow the instructions here => http://css-tricks.com/perfect-full-page-background-image/
Also consider for further review and options, as in my case, the value of the
background-position:
setting options...
http://developer.mozilla.org/en-US/docs/Web/CSS/background-position
and also
background-origin:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
that accompany the backbackground-image CSS style setting.
afaict, with a background image added
e.g. background: url(back.jpg) fixed;
all that's needed to make it scale, is
background-size: cover;
less is more. ;)