How am I able to put a background image in my header on my website. I'm having trouble sizing it the correct way and making it a background image.
An example would be this website:
http://crossfitweightlifting.com/
Thanks!
I would have been good if you could share what you have currently but try to apply some css to the image in header as below
.header img {
position:absolute;
top:0;
left:0;
min-width:100%;
}
this will try to make the image occupy the entire space.
just add this into your css:
header{
background: url("yourImage.jpg") center center fixed;
/*OPTIONAL*/
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
Related
I have been dealing with this issue for a while now, tried to solve it myself but i just can't seam to be able to get to the bottom of it. Basically, I have a background that I use in the body tag. However, as soon as I add text on the background the image gets distorted on mobile devices, pixelated and it kind of zooms in.
This is the css code I use for the body background image:
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any help would be greatly appreciated.
By fixing the image and position the center location on it, the image will center in all your display modes.
html,body{
height: 100%;
}
body{
background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
I wanted to do this in CSS but javascript is ok too.
I have a png image I use as the menu bar that I put over my background image. Theres a part of the image that exceeds the page to the right. I want it to just be cut out of the screen instead of strectching the web page and making a white line appear to the right of my background image.
Just in case the CSS:
position:absolute;
left:2%;
width:120%;
top:-220px;
height:700px;
z-index:6;
Any help is appreciated! Thank you!
May be set the width to 100% or less!
how about background-size: cover;
#abc {
background: url(http://i.imgur.com/nvH8nI3.jpg) 50% 0 repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have to fix by HTML page's background for full width, but the height of the background is not as per my design. How can I fix it?
CSS Code:
html {
background: url(images/body_bg.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You're missing a ' in the url
background: url('images/body_bg.jpg') no-repeat top left fixed;
Demo
Use background-size like the one used below,
body {
background-image: url(image1.jpg) no-repeat;
background-size: 100%;
}
Some useful links :
Scale background image style
Stretch and Scale a CSS image Background - With CSS only
I have an image for a website and I wish to resize it so it covers ANY given screen.
Note:
I don't want the scrollbars to appear.
I am trying to resemble something like the following website
http://frontrow-demo.squarespace.com/
The only solution I can think of was re-sizing the height and width but that makes the scroll bars appear. I am guessing its a CSS solution I am struggling to create.
Edit:
This is the code I tried, but its "Zooming" the pic to make it stretch across the screen. I would like it to resize it so the quality and the actual pic would show up.
#bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
Just use some simple css
#theimg {
position : fixed; /*can also use absolute and the parent element can have relative*/
top : 0;
left : 0;
width : 100%;
height : 100%;
}
here is a demo fiddle
http://jsfiddle.net/rg3eK/
You want to use the CSS background property: http://css-tricks.com/perfect-full-page-background-image/
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;
}
Works in:
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
Anchor it to the sides and set the size to auto.
img#fullscreen {
height:auto;
width:100%;
left:0;
right:0;
top:0;
position:absolute;
}
Working fiddle.
This won't resize to the bottom (the one on the linked page also doesn't) but also doesn't mess the aspect of the image.
You may want to check photo-resize option.
Or you may try adding this:-
<img src="picture.jpg" width="100%" alt="">
ie, if you set only one dimension of an image, the other will end up being proportional to it.
or this:-
#image{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
left:0;
right:0;
bottom:0;
top:0;}
Use background-size: cover in CSS on the HTML element
html {
background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See this fiddle:
jsFiddle
For a better css.you must use this
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'm trying to keep my site's content perfectly aligned with the center of its background image, is there a way to do this?
Currently my background is
body {
background: url(http://nickhumphries.com/images/tucson-bgl3b2.jpg) no-repeat center center fixed;
background-color: #fafafa;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align:center;
}
#mainContainer {
margin:0 auto;
}
you don't need text align center in your body since you are using divs over it. and you should probably use #maincontainer as a class .maincontainer so you can reuse it seperately.
And why are you using 100% size and cover at the same time? you can either resize it to cover or keep it at 100% right?
Play with these ideas.
usually if i want to center something, i give it a fixed width and set margins left and right to auto