I started creating a simple page with a background and a link to my homepage. I formated the text with css:
h1{
font-size: 48px;
color: #fff;
margin: 0px;
text-align: center !important;
display: table-cell;
vertical-align: middle;
text-decoration: none;
}
so the text stays in the middle of the page and the page is formated like this:
.box1{
height: 100vh;
width: 100%;
background-image: url(pics/test.jpg);
background-size: cover;
background-position: center;
display: table;
background-attachment: fixed;
}
So the problem is when i use a simple h1 the text stays in the middle but when I set it in a link to my index. It moves to the top left corner like it isnt formated. I assume it doesnt see my css configuration. In html it looks like this:
<div class="box1">
<h1>Test Site</h1>
</div>
Just add the styling from the h1 to a.
a{
font-size: 48px;
color: #fff;
margin: 0px;
text-align: center !important;
display: table-cell;
vertical-align: middle;
text-decoration: none;
}
and html:
<div class="box1">
Homepage
</div>
Related
I'm a CSS novice in need of some help. I need to display a header image and have a working dropdown nav menu sit inside the bottom right of the image. I went ahead and created the nav and used a negative margin to position it so that it appears at the bottom of the background image. The hover effect in the nav is clearly not working. And it has to do with it being inside the image. So how do I get the nav to work if it's positioned inside the image? Or is there a better way to display the nav in the image's bottom right? Thank you for your help!
Here's the code:
.img {
background-image: url("https://raw.githubusercontent.com/bfoley-teamug/misc_images/master/section_header_ip.png");
min-height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.container {
float: right;
margin: -40px 0;
}
#topnav {
overflow: hidden;
background: transparent;
font-weight: 600;
text-transform: uppercase;
}
#topnav a {
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
#topnav a:hover {
background-color: #ddd;
color: red;
cursor: pointer;
}
<div class="img">
</div>
<div class="container">
<div id="topnav">
Home
Link 2
Link 3
Link 4
Link 5
</div>
</div>
The current header tags are side by side and I'm trying to get the second header tag to sit underneath the first.
I currently have h1 and h2 tags. I have tried putting it all into an h1 tag and using span, however, the styling on span does not take well when sizing and aligning. I am trying to have it centered on the screen and have the subtitle directly underneath of the title, centered by the middle, not left aligned and next to it.
header {
width: 100%;
height: 100vh;
background-image: url("underneath.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
padding-top: 15%;
color: rgb(240, 240, 240);
display: flex;
align-items: center;
justify-content: center;
}
.name {
font-size: 6em;
display: inline;
}
.subtitle {
display: inline;
}
<header>
<div class="wrapper">
<h1 class="name">Answer 42</h1>
<h2 class="subtitle">Customer Acquistions</h2>
</div>
</header>
I am trying to create a title for the page with a subtitle underneath of it and have it centered above a background image I put in CSS. My current code has the the header tags side by side.
I hope this simple solution will help you.
header {
width: 100%;
height: 100vh;
background-image: url("underneath.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
padding-top: 15%;
color: rgb(240, 240, 240);
}
.name {
font-size: 6em;
margin-bottom: 0;
line-height: 1em;
text-align: center;
}
.subtitle {
text-align: center;
margin-top: 0;
}
<header>
<div class="wrapper">
<h1 class="name">Answer 42</h1>
<h2 class="subtitle">Customer Acquistions</h2>
</div>
</header>
I have a domain in which I have made a page in HTML, CSS and Bootstrap 3.
If we scroll down at the footer, we can the text Footer is not in the center as shown below in the image (screenshot of the footer from the domain). Its little bit up.
I am wondering what changes I need to make in the existing CSS codes so that the text Footer exactly comes at the center.
The CSS codes which I have used in the footer section is:
/**** Footer START ****/
.footer {
width: 100%;
height: 12%;
background-color: black;
display: flex;
align-items: center;
background-size: 100% 100%;
justify-content: center;
}
.footer p {
color: white;
font-size: 2.25em;
}
/**** Footer FINISH ****/
I have used the same CSS codes for the Header and its working perfectly as shown below in the design:
I do agree that in the actual snippets and in the fiddle as well, its working quite fine but I am not sure why its not working in the actual domain.
I do not understand but if you want from top to bottom in the middle:
footer{
text-align: center;
background: black;
color:white;
font-size: 1em;
width: 100%;
height: 40px;
overflow: hidden;
}
footer>p{
margin-top: calc(20px - 0.5em);
height: auto;
}
<footer>
<p>Text</p>
</footer>
Try this snippet, it's working.
If you want vertically middle also, then try to give line-height in container that matches with height.
.footer {
width: 100%;
height: 50px;
line-height: 50px;
background-color: black;
text-align: center;
background-size: 100% 100%;
justify-content: center;
}
.footer p {
color: white;
font-size: 1.25em;
}
<div class="footer">
<p>Footer</p>
</div>
It looks like it worked...
.footer {
width: 100%;
height: 12%;
background-color: black;
display: flex;
align-items: center;
background-size: 100% 100%;
justify-content: center;
vertical-align: middle;
}
.footer p {
color: white;
font-size: 1.25em;
}
<div class="footer">
<p>Footer</p>
</div>
I'm getting started with BootStrap 3 and trying to use a background image with text on it. At same time I want it to be reponsive but it seems there is some issue with the way I implemented it. I'm able to get it work for normal desktop but when I try to emulate on a mobile device, text goes outside of background image.
http://jsfiddle.net/cn5guyt4/2/
<div id="front-landing">
<div class="container jumbotron hero-unit">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.hero-unit {
position: relative;
margin-bottom: 0;
margin-top: 15px;
background: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg') 50% 80% no-repeat;
background-size: 100%;
min-height: 700px;
}
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
Can someone help me to figure out what am I doing wrong here ?
Thanks
In your hero-unit class, the background-size set to 100% but it should be cover instead. That made a huge difference: see bootply.
I think what you are really trying to do is get the jumbotron of bootstrap to have a background picture. Why is your jsfiddle code different from the code you posted here? there is a wild margin of difference. My fix is using the code above.
Working bootply
<div id="front-landing">
<div class="container jumbotron ">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.jumbotron{
background-image: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg');
background-size: cover;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
you can set image as a background-image
.imageAndText img{
width: 100%;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
for text you can use col-xs-12 or work write individual media query
So I've been doing a website for an assignment and for some reason I can't seem to align the content of the website. it's a simple layout. It's pure content no sidebars or anything. Here'es the HTML for the content:
<!-- Begin Content Column -->
<div id="content">
<img src="img8.png" style="width: 460px; height: 100px;" alt="pokemon">
<br>Pokemon:
The First Movie
<br>Soundtracks
</div>
<!-- End Content Column -->
And here's the CSS:
body {
background: black;
font-family: Trajan Pro,Arial, Helvetica, sans-serif;
font-size: 28px;
text-align: center;
background-image: url('img2.jpg');
background-repeat: repeat-x;
background-position: bottom center;
background-size: 460px 300px;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: transparent;
margin: 0 auto;
height: 1024px;
width: 460px;
display: inline;
}
Thank you all in advance. I'm trying to align the content's image to the background's image to make like a fading effect, but can't center the content.
Change the style of content to
display:inline;
All you should have to do is remove float: left; and display: inline; from the #content css selector.
Remove float:left; from #content and add display:block; to it. That should center it.
Remove the following from the CSS #content :
display: inline;
float: left;