Was curious how you make image text kind of like this
https://dribbble.com/shots/2150115-Alltracks/attachments/393908
There are several ways to approach this. You could set a background image across the page in CSS3, for example, which would look like 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;
}
You may also want to see Clipping and Masking in CSS. (left in comments by nzkks)
Related
My webpage is currently set up as following:
Documents/Portfolio/Index.html
Documents/Portfolio/CSS/Main.css
Documents/Portfolio/Assets/images/mountains.jpg
In my CSS:
background-image: url('../Assets/images/mountains.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fff;
Sorry for the noob question, but I can't figure this one out. I tried several things and moving the photo around and still no luck.
You are providing too much data to the background-image property, replace it with the background property.
I've got a PSD template to convert it to HTML. How do I deal with the background food images (highlighted red on the image) when I zoom-out the browser? The total width is 1300px, container is 1000px. What would be the best approach? Do I repeat them? How? What would you do? Thank you.
Please try this:
html {
background: url(images/yourimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Basically you can go through 2 approaches to get that done...
Use 3 different div's to work out.
<div class="left-div"><img src="food_img1.ong"/></div>
<div class="inner-div">Here goes main container</div>
<div class="right-div"><img src="food_img2.ong"/></div>
Try to use the method given by user Satya above as,
html,body{
background:#333333 url(../img/bg/bg3.jpg) no-repeat center center;
background-size: cover;
}
everyone.I want to make a full width background image as responsive.I am using bootstrap3.00 framework.as usually when some one use bootstrap framework it make a template as responsive but the background which i used that is situated outside of the bootstrap container.and when i look it for a small device the background image shows scroll bar.Now how can i fixed the problem??please the experts give me a suitable solution.
Perfect Background image (from css-trick.com)
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;
}
Example :
html {
background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm building a website, and I just have to make a welcoming page.
It's a simple page: just a background with a button, which directs to our homepage. I just have one problem with the background: my background is too big.
How can I edit with CSS and HTML so that my wallpaper fits all the screens?
(I want to make the page unscrollable.) All I have so far in the CSS:
body{
background-image:url("voorpagina.jpg")
}
Thanks a lot!
P.S. I've already tried background-size:cover; but it didn't seem to work?
body{
background: url("voorpagina.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
this should work if not you could use media-quires,
similar to your question 1
similar to your question 2
I'm working on a basic html page and I have this background image bg.jpg.
But the problem is depending on the screen size you have and how many pixels the screen has I'm not able to view the whole background image which is something I want.
How do I make the background fixed so you can see the whole background?
If you mean a full page background image than you can simply do it with CSS3 background-size property
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you need to attach it, kinda fixed and shouldn't be scrolled, than use
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
You can do something like 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;
}
You can read more here: link
Delete your "body background image code" then paste this code:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS pseudo selectors.
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
Of course those other solutions are OK too, but they only work in latest modern browsers. This pseudo selection solution works in most browsers used today. If you'd like to support even older browsers, like ancient versions of IE, then you can use a div to contain the background image and style it as you'd like.