This is probably something simple that I can't quite figure out. But I am trying to have a gif as a background to create an illusion of flowers growing with a campaign logo image over it and a donation button.
When in full screen, the background gets cut off at the bottom. Somehow the image is being pushed down. As you make the screen smaller for mobile responsiveness, the full image starts to appear (in height). I'm not sure what I am doing wrong.
Campaign Page
Any help would be much appreciated! Thank you. Below is the code I am currently using.
.header-wrapper{
width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
background-size: cover;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
}
.centered { margin-left: auto; margin-right: auto; }
.align-center { text-align: center; }
.campaign-logo {
max-width: 70%;
position: relative;
height: auto;
}
.padding-3x { padding: 45px; }
.button1{
color: #fff;
display: inline-block;
font-size: 18px;
letter-spacing: .75px;
padding: 15px 21px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
vertical-align: middle;
}
.green-bg { background-color: #8ec63f;}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png"/>
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&df_id=1540&1540.donation=root">Give Now</a></p>
</div>
just add: background-position: bottom; on your header-wrapper class
Uou can use : background-position: center bottom;
.header-wrapper {
width: 100%;
background-image: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif);
background-size: cover;
background-position: center bottom;
position: relative;
margin: 0 auto 0 auto;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.align-center {
text-align: center;
}
.campaign-logo {
max-width: 70%;
position: relative;
height: auto;
}
.padding-3x {
padding: 45px;
}
.button1 {
color: #fff;
display: inline-block;
font-size: 18px;
letter-spacing: .75px;
padding: 15px 21px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.2s;
transition: all 0.2s;
vertical-align: middle;
}
.green-bg {
background-color: #8ec63f;
}
<div class="header-wrapper contained-12 centered align-center middle">
<img class="campaign-logo" src="https://secure3.convio.net/little/images/content/pagebuilder/horticulture_logo.png" />
<p class="padding-3x"><a class="button1 green-bg" title="Give Now" href="Donation2?idb=[[S76:idb]]&df_id=1540&1540.donation=root">Give Now</a></p>
</div>
.header-wrapper {
width: 100%;
font-family: "museo-sans", Helvetica, Arial, sans-serif;
background: url(https://secure3.convio.net/little/images/content/pagebuilder/HorticultureBanner-Animated1.gif) no-repeat center center fixed;
background-size: cover;
}
Related
I'm trying to make a responsive banner. I have a background image that resizes as you adjust your screen and a transparent div element which contains text.
Issue 1
The problem is that my transparent div element is not resizing properly
I tried to adjust my transparent div element to the top and bottom of the image by using height:100%, but that didn't work it left a gap on top. (Picture below shows what I'm talking about)
Issue 2
Also, text inside my transparent div element should be adjusted center-left side. I got the text to move to the left side but it's not centered in the transparent div element.
.banner {
background: url(https://i.imgur.com/abF4sj3.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
width: 100%;
height: 423px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.caption {
position: absolute;
top: 13%;
left: 0%;
text-align: left;
color: white;
font-weight: bold;
height: 100%;
width: 150px;
}
.transbox {
padding: 50%;
max-width: 100%;
border-radius: 6px;
width: 100%;
height: 100%;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
.transbox span {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
}
.trans-text-top {
margin-left: -55px;
margin-top: 26px;
font-size: 200%;
}
.trans-text-bottom {
margin-left: -55px;
margin-top: -20px;
font-size: 220%;
}
.linebreak {
padding-bottom: 30px;
}
upper-linebreak {}
#media screen and (max-width: 700px) {
.transbox {
display: none;
}
}
<div class="banner">
<div class="caption">
<div class="transbox">
<span class="trans-text-top">Tree</span>
<div class="linebreak"></div>
<span class="trans-text-bottom">Pathway</span>
</div>
</div>
</div>
Different approach
HTML structure
<div class="banner">
<img src="">
<div class="caption">
<h1>...</h1>
<h2>...</h2>
</div>
</div>
CSS
.banner {
position: relative;
...
}
.caption {
position: absolute;
top: 0;
...
}
Handle font-size in .caption with vw.
Example
.banner {
position: relative;
}
.banner img {
/* Make image responsive */
display: block;
width: 100%;
max-height: auto:
}
.banner>.caption {
position: absolute;
top: 0;
width: 25%;
height: 100%;
background: white;
opacity: 0.6;
}
.banner>.caption>h1,
.banner>.caption>h2 {
text-align: center;
}
.banner>.caption>h1 {
font-size: 5vw
}
.banner>.caption>h2 {
font-size: 4vw;
}
<div class="banner">
<img src="https://i.imgur.com/abF4sj3.jpg" alt="">
<div class="caption">
<h1>Tree</h1>
<h2>Path</h2>
</div>
</div>
Hint
The advantage of this approach is that you don't have to deal with the background-image stuff.
I placed an exact height on your .transbox class since it was defined in the parent container.
.transbox {
padding:50%;
max-width: 100%;
border-radius: 6px;
width:100%;
height:423px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
I set margins left and right to auto. This centers your text. Hope it helps.
.trans-text-top{
margin-left:auto;
margin-right:auto;
margin-top:26px;
font-size: 200%;
}
.trans-text-bottom{
margin-left:auto;
margin-right:auto;
margin-top:-20px;
font-size: 220%;
}
Try this.Hope this will work for you.
HTML Code
<div class="banner">
<div class="captionTransbox">
<h1 id="captionTop">Tree</h1>
<h2 id="captionBottom">Pathway</h2>
</div>
</div>
CSS Code
.banner {
background: url(https://i.imgur.com/abF4sj3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 423px;
position:relative;
}
.captionTransbox{
height: 423px;
width: 300px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
#captionTop {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
padding: 50% 20% 0% 5%;
}
#captionBottom {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
padding: 0% 20% 20% 5%;
}
#media screen and (max-width: 700px) {
.captionTransbox {
display: none;
}
}
For some reason, my CSS file will not align my circle on the page.
This is my html object for a circle:
<div class="circle-text">Upload your photo here</div>
CSS file:
.circle-text {
display: table-cell;
height: 400px; /*change this and the width
for the size of your initial circle*/
width: 400px;
text-align: center;
vertical-align: middle;
align
border-radius: 50%;
/*make it pretty*/
background: #000;
padding-top:;
color: #fff;
font: 18px "josefin sans", arial;
}
Any ideas why?
Try to add:
.circle-text{
margin: auto
}
i think it works
.circle-text {
height: 400px; /*change this and the width
for the size of your initial circle*/
width: 400px;
line-height: 400px;
text-align: center;
vertical-align: middle;
border-radius: 100%;
position:absolute;
left:50%;
transform:translate(-50%,0);
/*make it pretty*/
background: #000;
color: #fff;
font: 18px "josefin sans", arial;}
.circle-text .txt{
line-height: 400px;
text-align: center;
vertical-align: middle;
}
<div class="circle-text"><div class="txt">
Upload your photo here</div></div>
I've already run my code through a validator, so there are no syntax errors, but I can't figure out what's going on. Nothing I do changes the "p" elements in my code. I've tried styling the p class. I've tried wrapping them in a "div" tag and stylizing that, but it just seems to keep inheriting the body properties. If I want to style the text at all, I have to do it through the body properties.
Here's the HTML.
<div id="topBar"><img src="images/logo.png" alt="Escaping Shapes"/></div>
<div id="rope"><img src="images/rope2.png" alt="Bottom of logo border"/></div>
<p>Yarrrrgh! Shapes be escaping from below the surface of the Web! Push'em back down below the page as fast as ye can!</p>
<p class="bold">Your time: <span id="time">(not attempted yet)</span></p>
<div id="box">
</div>
Here's the CSS for the body:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
Here's the CSS for the "p" element that does NOTHING for me lol.
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
Not sure what's going on, but any help would be greatly appreciated. I can provide more of my code if necessary.
EDIT My Entire CSS:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
#topBar {
background-color: #2980b9;
height: 120px;
width: 100%;
position: relative;
}
#topBar img {
display: block;
margin: 0 auto;
width: 600px;
position: relative;
top: 25px;
left: -85px;
}
#box {
background-color: #0ff;
height: 150px;
width: 150px;
display: none;
position: relative;
top: 0;
margin-top: 0;
margin-bottom: 10px;
opacity: 0.9;
box-shadow: 10px 10px 5px #7e7e7e;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear ;
-ms-width:all 0.1s linear ;
-o-width:all 0.1s
}
#box:active {
box-shadow: none;
top: 10px;
margin-bottom: 0;
-webkit-transform:scale(0.25, 0.25);
-moz-transform:scale(0.25, 0.25) ;
-ms-width:scale(0.25, 0.25) ;
-o-width:scale(0.25, 0.25) ;
}
#box:hover {
opacity: 1;
}
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
.bold {
font-weight: bold;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
You have not closed off -o-width:all 0.1s
with a semi-colon under your #box css properties This is your problem.
You also haven't closed off your #rope properties }
It seems that the p styles are being applied to the p. I tried by setting the font color via the p rule and it works: http://jsfiddle.net/L2q1Lbzj/
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
color: red;
}
There is no problem in your css.
The <p> is working good enough in your given code.
CSS properties overlap each other.So be careful about this.
jsfiddle
edit:
as your new edit
you are missing closing }
write
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
}
instead of
rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
link
I'm trying to make this web page and it just has so many issues. I cannot center the #titlediv and the navbar sometimes disappears. I'm not gonna lie: it might be a big fix, I'm really not sure. But here's the link if anyone can possibly salvage it:
http://jsfiddle.net/glenohumeral13/c604vbrn/
Code:
<body>
<div id="parallaxish"></div>
<div id="navbar">
<nav>
Item1
Item2
Item3
</nav>
</div>
<div id="contentdiv">
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
<div class="barrier"></div>
<div id="item1">
<h1>Item1</h1>
</div>
<div class="barrier"></div>
<div id="item2">
<h1>Item2</h1>
</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
#parallaxish {
background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
#navbar {
float:right;
height: 30px;
margin-right: 100px;
}
nav a {
text-decoration: none;
display: inline;
list-style-type: none;
padding-right: 15px;
padding-top: 10px;
float: left;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-o-transition: color 1s ease-out;
transition: color 1s ease-out;
font-weight: 100;
color: #fff;
-webkit-font-smoothing: antialiased;
}
nav a:hover {
color: #16a085;
}
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
.barrier {
height: 120px;
width: 100%;
background: transparent;
}
#item1 {
height: 600px;
width: 100%;
text-align: center;
background-color: white;
color: #16a085;
}
#item1 h1, #item2 h1 {
padding: 5% 0;
}
#item2 {
height: 600px;
width: 100%;
text-align: center;
background-color: black;
color: white;
}
First of all, a demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
What it looks like what you are trying to do is vertically and horizontally center it, in the div, correct?
There is a simple way to do this with css, that i find very useful:
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
First of all, we give position:relative; to the div id="welcome":
/*With your current CSS*/
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
position:relative;
}
And then, the magic! The <div> id="titlediv" is given position:absolute; and a few other rules:
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
width: 180px;
height: 76px;
left: 0;
right: 0;
top:0;
bottom:0;
overflow: auto;
}
This little trick only works if the width and height are declared.
Now, for the nav bar easily fixed:
#navbar {
position:absolute;
top:0;
right:100px;
height: 30px;
z-index:10;
}
And to wrap it all up, a full screen demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/
http://stickyjs.com/ will help you!
I
//LOAD THE FILES
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
/RUN THE SCRIPT
<script>
$(document).ready(function(){
$("#navbar").sticky({topSpacing:0});
});
</script>
if i were in your place i'll try to make my page by using a framework like bootstrap or foundation , if you want a lightweight one you can always try skeleton is easy to use & you can find snippets around the web very easily :
http://getbootstrap.com/ |
http://bootsnipp.com/
hopefully i helped you & next time try using google first
I received a couple of images and I need them to scale over the whole width of the page, but in height, it should stay the same height for the purposes of the design. (Don't blame me, that's what the designer wants)
I have this HTML:
<section id="fotografie-intro">
<div class="details">
<h1>Fotografie</h1>
<span>Professionele, realistisch foto's gemaakt door een professionele fotograaf.</span>
<span>€ 75 <small>per set</small></span>
</div>
</section>
I have this CSS:
#fotografie-intro {
background: url(../img/unscaledPics/FOTOGRAFIE_headerfoto.jpg);
background-size: 100% 100%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
font-family: 'Titillium Web', sans-serif;
color: rgb(246, 246, 246);
}
#fotografie-intro .details{
background-color: rgba(0, 0, 0, 0.6);
width: 33.333333%;
}
#fotografie-intro h1 {
width: 350px;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 400;
text-align: center;
padding-top: 40px;
z-index: 88;
}
#fotografie-intro span {
display: block;
width: 250px;
padding-top: 20px;
text-align: left;
padding-left: 40px;
font-weight: 100;
}
#fotografie-intro span:last-child {
font-size: 2em;
padding-left: 40px;
}
Above screenshot is how it should not look.
You could go a couple of different ways.
Background-size should do the trick.
background-size:100% 400px;
In the example the width would be 100% and the height would be fixed to 400px
if you want an image to cover it no matter what you could go with
background-position: center;
background-size: cover;