I want to get this picture Click Here to look like the picture on this website Click Here. It looks cropped almost because it doesn't look scaled or anything, but I know it's not cropped because I got the image off of this website. So any ideas. I tried to look at inspect element... I couldn't really decipher it.
Bensirpent07
0
Junior Poster
Recommended Answers
Jump to Postits usually css positioning of a background image
you can select in css how big a box, and whee it is placed, to display an image bcakground
Jump to Post+1 for almostbob..
If i can add that may be helpful for you, just use the dev tools of your browser so you can inspect the elements of the page. here is how the site took care of that effect..
All 6 Replies
almostbob
866
Retired: passive income ROCKS
its usually css positioning of a background image
you can select in css how big a box, and whee it is placed, to display an image bcakground
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
+1 for almostbob..
If i can add that may be helpful for you, just use the dev tools of your browser so you can inspect the elements of the page. here is how the site took care of that effect..
Bensirpent07
0
Junior Poster
Awesome!!! :D it works great... now do you know how to make that sort of dark overlay... to where it just looks darkened... I don't know how to do that either XD sorry I have never played with this kind of thing before so this is a pretty cool learning experience. Also I don't know if I'm just tired or something but I can't seem to get the <div> element snug to the sides... it has these little white spaces that look like this. Click Here
Here is the code if you want to take a look...
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weblup</title>
<link rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
<div class="header-background"></div>
</body>
</html>
CSS
div.header-background{
background-image: url(../images/Graph.jpg)!important;
background-repeat: no-repeat!important;
background-position: 50% 50% !important;
background-size: cover !important;
background-color: transparent !important;
background:inherit;
height: 500px;
width: 100%x;
}
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
An overlay is generally just a div with opacity style applied to it. If you wanted to overlay the entire screen you set the div to position fixed and ensure its width and height fits the screen or whatever area you want to cover. You also need include the z-index style to place the overlay above/between the target elements. With regards to the space, that appears to be caused by the default browser styles related to margin and/or padding. You may consider using a CSS Reset to apply a margin and padding of 0 to all target elements. Do a quick search on that and you'll find a few popular resets.
Bensirpent07
0
Junior Poster
This is for anyone who had the space problem and was looking for a fix. This is the code I found to reset everything. Thanks everyone for all the help :D
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Bensirpent07
0
Junior Poster
Ok I have tried for a while now to figure out how to completely copy the top of this page Click Here but I haven't been able to do it. I do own this page and I can prove it, so I'm not doing anything wrong. It's just I'm still fresh learning HTML and I just could use some help.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.