I have been looking around on stackoverflow to find the answer on my problem but I couldn't find it. The problem is that I have a background img where I want to have text on it. But if I use postition: absolute; the text disappears. I also don't want it in my style because I going to use this on different pages with different images.
Visit problem
HTML:
<body>
<div id="header">
<img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</body>
And my CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
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;
}
html, body {
width: 100%;
height: 540px;
background: #efede7;
}
body {
background: #efede7;
font-family: 'Montserrat', sans-serif;
color: #fff;
line-height: 1.3;
}
#header {
}
.begin {
width: 100%;
max-height: 540px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
font-size: 1.5em;
color: #c7c7c7;
text-align: center;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
I hope someone is smarter than me and could figure this out?
Thanks for already looking into it!
You put your background as image, so it's not just background, but also element with dimension. You should remove your <img /> and put it as background using CSS.
#header {
background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}
Remove the header image from your html and use CSS properties instead.
See DEMO which uses this updated CSS snippet:
#header {
background-image: url('http://www.larsdejonge.nl/werk/img/background.jpg');
background-size: auto 540px;
background-repeat: no-repeat;
height: 540px;
}
Background-resize is necessary because your image is way too large.
Remove <IMG> and use the img url as background in CCS:
here is an example:
http://jsfiddle.net/act6uasf/5/
I see that you don't want the img in your CSS but if you want that I think you need to find it out your self. I don't see the big problem using a url in your CSS ore is it just me?
My solution
You can better use it for the time this now, if you find later something else you can always change it.
HTML Code:
<body>
<div id="header">
<div class="text">
<h1>Aangenaam Klassiek</h1>
<h2>Vormgeving & Frontend</h2>
</div>
</div>
</body
CCS Code:
#header {
background-image: url(http://www.larsdejonge.nl/werk/img/background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 540px;
}
.text {
padding-top: 150px;
}
h1 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 3em;
font-weight: 700;
color: #fff;
text-align: center;
}
h2 {
font-family: 'ProximaNova', sans-serif;
color: #545454;
font-size: 1.25em;
letter-spacing: .06em;
margin: 0;
padding: 0 0 2.5em;
text-align: center;
text-transform: uppercase;
}
h2::after {
content: '';
width: 80px;
display: block;
background: #272f38;
height: 10px;
margin: 30px auto;
text-align: center;
}
If you really want to solve this problem with absolute position, you can use my example
http://jsfiddle.net/act6uasf/2/
here to make absolute property work, you just need to add
position:relative;
to #header, but i recommend you to try solving it with background property.
CSS doesn't prevent you from swapping the image out like you have suggested. I would use a body class.
HTML
<body class="home"><!-- change this class for each page -->
<div class="intro">
<p>
Hello World!
</p>
</div>
</body>
Simply change the class on the body tag for each page, i.e. home, about, contact, etc.
CSS
.home .intro {
background-image: url('path-to-image.jpg');
}
.about .intro {
background-image: url('path-to-some-other-image.jpg');
}
Here is a demo. Swap the class on the body tag from home to about and click Run to see the difference.
Related
Positioning the <h1> to the position that I want.
Here's what I am trying to do: https://imgur.com/a/D0ief0a
CSS File and HTML File
#import url('https://fonts.googleapis.com/css? family=Montserrat:400,600');
body {
font-family: 'Montserrat';
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: antiquewhite;
}
.header img {
padding: 1em 2em;
width: 10%;
display: block;
border-radius: 80px;
}
.header h1 {
padding: 1em;
text-align: center;
font-size: 3em;
position: relative;
}
<header>
<div class="header">
<img src="../Welcome/images/123.jpg" alt="">
<h1> A Work In Progress</h1>
</div>
</header>
I tried everything that comes into my mind.
See if it helps :
JSFiddle DEMO
.header img {
padding: 1em 2em;
width: 10%;
border-radius: 80px;
position: fixed;
float: left;
display: inline-block;
}
Added float: left; and position: fixed;, also changed the display to inline-block
I think the best way to do this is use position:fixed:
.header h1 {
text-align: center;
font-size: 3em;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This will keep it centered regardless of device coming into your site.
Play the with parameters a bit to get the exact position you want, also you might want to do this to the background aswell.
I don't understand why my footer is sitting slightly above the bottom of my webpage and not directly on the bottom
h6 {
font-family: Neue Haas Grotesk, sans-serif;
font-weight: 300;
font-size: 1.4vw;
color: white;
position: relative;
display: block;
}
.footer {
position: relative;
display: inline;
bottom: 0;
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
<div class="footer">
<h6>© Alex Burger. All rights reserved<br>Further information can be requested through email.</h6>
</div>
The <h6> tag has a native margin. So your problem will be solved with:
.footer h6 {
margin-bottom: 10px;
}
Note that setting margin: 0px have not the result that you expect, this will only be solved changing other parts fo your document.
I am trying to get rid of a thin white line that appears between the 1st 2 Div's of my website ("video_main" and "parallax"). I thought this might be an artifact of the video so I cropped the bottom in export from Premiere Pro CC but it still appears. I tried making a margin, padding and border 0px for the video_main and parallax div's but it doesn't get rid of the thin white line. Can anyone tell why it's happening? Many thanks.
<!DOCTYPE HTML>
<html>
<head>
<script src="//content.jwplatform.com/libraries/YQ8opLwo.js">
</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="red_hook_rush_hour_trimmed.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>
</div>
<div class="parallax">
<div class="container_blank_space">
<p>text</p>
</div>
<section class="wrapper_pano_and_text">
<div class="pano">
<img src="https://bartonlewisfilm.com/barton-3.jpg" alt="barton" width="auto" height="auto" />
</div>
<div class="pano_text">
<p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
</div>
</section>
</div>
</body>
</html>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
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,
paragraph {
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;
}
/*THIS IS THE END OF THE MYER RESET*/
body {
width: 100%;
margin: 0 auto 0;
}
a {
font-family: "europa", sans-serif;
text-align: left;
text-decoration: none;
letter-spacing: 3px;
font-size: 22px;
color: white;
}
a:hover {
text-decoration: underline;
}
.parallax {
/* The image used */
background-image: url("https://bartonlewisfilm.com/html_bckgd_1024.jpg");
/* Set a specific height */
height: 1620px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.video_main {
margin: 0 auto 0;
width: 100%;
height: auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index: -1500;
}
.content h1 {
font-family: "jaf-domus-titling-web", sans-serif;
color: white;
text-align: center;
font-size: 400%;
letter-spacing: 4px;
z-index: 100;
position: absolute;
top: 50px;
}
.content h2 {
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 225%;
letter-spacing: 6px;
z-index: 100;
position: absolute;
top: 175px;
}
.content p {
font-family: "europa", sans-serif;
color: white;
font-size: 120%;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
.content .videolinks {
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
}
.videolinks p {
padding: 20px;
padding-left: 60px;
}
.videolinks p:first-child {
padding-top: 250px;
}
.wrapper_pano_and_text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
align-items: center;
}
.pano img {
width: 100%;
height: 100%;
padding: ;
z-index: -1500;
}
.pano_text {
width: 45%;
overflow: hidden;
z-index: 100;
position: absolute;
}
.pano_text p {
font-family: "europa", sans-serif;
font-size: 150%;
padding-right: 80px;
letter-spacing: px;
color: white;
font-weight: 500;
line-height: 135%;
font-weight: 500;
}
.container_blank_space {
height: 75px;
}
.container_blank_space p {
text-indent: -9999px;
}
Looks like your video element under .video_main is missing a value for display different from inline.
You should set its value for display (CSS) to display: block or display: flex so the parent container can adapt its height properly.
Working Codepen example. Take a look at the declaration of .video_main video.
I've all of a sudden got a problem trying to display a background-image in CSS.
The image is invisible!
I'm trying to use this background image specifically for a certain location on the page, before scrolling down further to another image or background.
Can anyone shed some light on this situation and possibly provide the correct code/explain why I was wrong?
Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p> Form healthy habits to take your fitness to the next level. </p>
Start Now
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
}
h1, h2, a {
font-family: 'Oswald', sans-serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
margin: 0 auto;
}
/* Main */
.main {
background-image: url ("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
height: 600px;
}
.main h1 {
font-size: 150px;
color: white;
text-align: center;
}
.main p {
font-size: 18px;
}
/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
}
.supporting .col {
float: left;
width: 28%;
padding: 10px;
}
.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}
.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}
/* Feature */
.feature {
height: 600px;
}
.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}
/* Footer */
.footer {
height: 600px;
}
.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}
.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}
#media (min-width:600px) {
.main h1 {
font-size: 200px;
}
.supporting .col {
width: 30%;
}
.supporting h2 {
font-size: 40px;
}
.supporting p {
font-size: 14px;
}
.feature h2 {
font-size: 60px;
}
}
Remove space between url and ( in your CSS.
Copy paste URL in Browser if u can see it then may be add Id to div and hard code inside div, try to modify image size and style using view element in any one of the popular browsers.
Then create css for id and try it again .. Even I m new to Css but it always works ..
Or replace HTTP instead of HTTP.. if u dont have certificate then may be it will not show up ..
Maybe just remove the space in the CSS?
background-image: url("https://yt3.ggpht.com/-QkqvzArFkYs/AAAAAAAAAAI/AAAAAAAAAAA/qw97foQDUbQ/s900-c-k-no/photo.jpg");
I can't seem to center my div tag within a section tag. I can get it centered from left to right but not top and bottom in the center of the section tag. If I give a margin-top:xxpx then it moves the section tag down and exposes it (not good!)
Here is my css
body
{
background-color: yellow;
margin: 0;
}
header > * {
margin: 0;
float: left;
}
header
{
background-color: white ;
width: 100%;
height: 40px;
}
/*header > input {
margin: 10px 20px 0px 10px;
}*/
#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}
article > * {
margin: 0;
}
article
{
background-color: red;
}
#search {
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;
}
#mostdesired
{
background-color: #c7d1d6;
height: 200px;
}
section h2 {
margin:0;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
Here is my html
<body>
<header>
<p class="site-title">#Html.ActionLink("Site", "Index", "Home")</p>
<input id="toptext" type="text" />
</header>
<article>
<section id="search">
<div id="middlesearch">
<h2>Search Here</h2>#RenderBody()
</div>
</section>
<section id="mostdesired" ><h2>This is the most section</h2></section>
</article>
</body>
Vertically aligning with CSS is notoriously tricky.
Change the CSS to
#search {
position: relative;
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
position: absolute;
background-color: grey;
width: 700px;
top: 50%;
left: 50%;
margin-left: -350px; /* half the width */
}
and add one line of JQuery to up the div to be correctly centered
$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)
this line can be avoided if you decide to explicitly specify the height of the div at which point you can simply define the top margin in the CSS.
This avoids having to use tables.
The CSS declaration for header isn't closed on line 20
http://www.vanseodesign.com/css/vertical-centering/
Unfortunately, CSS doesn't make it to easy, but it is possible. Since the div height is dynamic, I would recommend the CSS table method. Yes, a total hack, but it does work.
You have to do a little work for block level elements, refer to these examples
http://phrogz.net/CSS/vertical-align/
http://www.vanseodesign.com/css/vertical-centering/
#middlesearch {
display:inline-block;
line-height:500px;
vertical-align:middle;
}