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.
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!
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.
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 customize Twitter Bootstrap's splash sign-in page.
I haven't touched the HTML, but I am trying to edit the background of the splash page.
Here is all the CSS I have added:
html {
background: url("../img/bumpit_splash.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What is happening is the top-half of the splash page retains its white background, but the bottom half gets the color of the background image I am trying to replace it with.
Thank you in advance for any help.
Hard to tell without a preview, but i'm guessing your <body> tag has a white background, and because its a login form, its not as tall as the <html> tag(your viewport).
Disable the background color for <body>, or make it 100% tall and add the background this instead of the html element.
I'm just starting to understand enough HTML / CSS to drive myself crazy trying to implement new things.
I'm trying to create a landing page with a full width / height background image that resizes with the viewport. That's an easy enough proposition if you're not using any css framework but I'm trying to build bootstrap into the page.
With bootstrap any content that I add below the body selector clears my background image as if it were part of the normal box model. If I remove bootstrap the page functions as expected and overlays the content on top of the background image. I'm guessing something in bootstrap is clearing all page elements but I haven't been able to find it.
The code I'm using to apply the background image is:
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -999;
}
There is an (indirect) example of a fullscreen background image using Twitter Bootstrap in this blog post.
The gist of it being:
body {
background: url(../img/bg.jpg);
}