The I placed a couple of header tags overlaid on my hero image. When I resize the browser the text-overlay moves up and down. Any Ideas as to how to make the text fixed in the middle of the hero image?
html:
<!--Hero-->
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<br>
<div class="heroText">
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
css:
// Hero
html, body, #heroimage{
width:100%;
height:100%;
}
.heroText {
text-align: center;
color: white;
margin-top: 50%;
margin-bottom: 50%;
}
#heroimage{
background: url('/../assets/img/codeHero.0.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My Website address is: http://adolfobarreto.atwebpages.com
.heroText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Adjust heroText class css to
.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;
}
Hope this helps you:
According to your query , i have tested it and tried to code bit so that might help you.
What i did is :
To your "small-12 small-centered columns" DIV; i have
given it a property as position:relative;
The another one "heroText" i have given its property as width:
100%;margin-top: 28%; ; so that this will fix up your text and can be viewed in any type of browser and devices.
I tried in my desktop and it's working good.
<html>
<head>
<title></title>
<style type="text/css">
.small-centered {
/* Set the position only */
position: relative;
}
.heroText {
text-align: center;
color: white;
/* Added two lines only */
width: 100%;
margin-top: 28%;
}
</style>
</head>
<body>
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<!-- Here in above given small-12 smaill-centered columns DIV , provide 1 CSS property that, " position: relative " that will set this div to its place to be aligned in a line. -->
<br>
<div class="heroText">
<!-- Here in above given heroText DIV , provide 2 CSS property that, " width: 100%, marngin-top:28%; " this will fix up this child div and will set your texts written. -->
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
I suggest you to use a display table structure for this.
I don't think you need such a complicated structure, but leaving it as it is:
.heroimage .row {
display: table;
height: 100%;
}
.heroimage .row .columns {
display: table-cell;
vertical-align: middle;
}
I would delete de <br> and clean .heroText margins
Here is solution:
#heroimage{
position:relative;
}
.heroText{
position: absolute;
top: 50%;
width: 100%;
}
Related
I am trying to center text over an image of a banner.
Here is a jsfiddle of it.
https://jsfiddle.net/c6Lcr0ap/
HTML:
<div class="about-me">
<div class="about-me__banner">
<div class="about-me__banner-text">
<h3>About Me</h3>
</div>
<div class="about-me__banner-image">
<img src="https://i.imgur.com/qiUWxdd.png">
</div>
</div>
</div>
CSS:
h3 {
color: orange;
}
.about-me__banner{
position:relative;
text-align:center;
}
.about-me__banner-text{
position:absolute;
width:100%;
color: orange;
}
<div class="about-me">
<div class="about-me__banner">
<div class="about-me__banner-text">
<h3>About Me</h3>
</div>
<div class="about-me__banner-image">
<img src="https://i.imgur.com/qiUWxdd.png">
</div>
</div>
</div>
It is actually simple to do this.
first your need to absolute position the text container .about-me__banner-text relative to it's parent .about-me__banner, so it can stay over your image.
Then you can center everything inside .about-me__banner vertically and horizontally with flexbox, resulting in these new rules:
.about-me__banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.about-me__banner-text {
position: absolute;
}
That should do the trick. You can check your modified fiddle here.
.about-me {
text-align:center;
}
Here is https://jsfiddle.net/fkp9g1jr/
.about-me__banner-text
class has width same as image
If a fixed height is ok for you, here you have another solution:
.about-me__banner-text {
background-image: url("https://i.imgur.com/qiUWxdd.png");
background-repeat: no-repeat;
background-position: center;
height: 57px;
line-height: 57px;
text-align: center;
}
Here is the jsfiddle: https://jsfiddle.net/01h8tqcc/
Update:
It is probably better to split the styles like this:
.about-me__banner {
background-image: url("https://i.imgur.com/qiUWxdd.png");
background-repeat: no-repeat;
background-position: center;
}
.about-me__banner-text {
height: 57px;
line-height: 57px;
text-align: center;
}
jsfiddle: https:https://jsfiddle.net/01h8tqcc/1/
I'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>
I can make it work but as soon as I try resizing it to make sure it's responsive, it scales very weird. Basically, I need the pictures to be their natural size and be lined up next to each other without any white space. Also, the text needs to in the middle.
I put it all in a JSFiddle and here's a GIF. The gif is more important so you can see my problem.
Thanks for your help, I just can't figure this out.
Thank you in advance for your help.
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="coverRevija">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\revija\revijacover.jpg">
<div id="linkRevija"><h3 id="emphasis">Modna revija</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverCajanka">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\cajanka\cajankacover.jpg">
<div id="linkCajanka"><h3 id="emphasis">Čajanka</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="coverIzlozba">
<img class="covers" src="file:\\C:\Users\andre\Desktop\karolin\web\hr\projekti\izlozba\izlozbacover.jpg">
<div id="linkIzlozba"><h3 id="emphasis">Izložba</h3></div>
</div>
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers{
width: 100%;
position: absolute;
z-index: -1;
left: 0;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
line-height: 227px;
}
.coverCajanka{
line-height: 227px;
}
.coverIzlozba{
line-height: 227px;
}
Your images are scaling proportionately - as you reduce the width, the height is reducing too (to maintain the image's aspect ratio). If you want the images to keep their height, you could change them from <img> tags in the html to background-images in the css. e.g. https://jsfiddle.net/9rgk6nuo/7/
HTML
<div class="aktivnostiList">
<div class="spacer">
</div>
<div class="covers-wrapper coverRevija">
<div id="linkRevija"><h3 id="emphasis">Modna revija</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="covers-wrapper coverCajanka">
<div id="linkCajanka"><h3 id="emphasis">Čajanka</h3></div>
</div>
<div class="spacerSmall"></div>
<div class="covers-wrapper coverIzlozba">
<div id="linkIzlozba"><h3 id="emphasis">Izložba</h3></div>
</div>
</div>
CSS
.aktivnostiIntro{
width: 75%;
height: auto;
margin: auto;
margin-top: 100px;
text-align: center;
}
.covers-wrapper {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.aktivnostiList{
text-align: center;
}
.coverRevija{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
.coverCajanka{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
.coverIzlozba{
background-image: url('http://placehold.it/1200x300'); //change this to your image source
line-height: 227px;
}
Try this update your css .covers class
` .covers{
min-width: 100%;
height:100%;
position: absolute;
z-index: -1;
left: 0;
}`
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!