I have a background image with a h1 and paragraph tag on top. I wish to create a border around the h1 tag without affecting the padding or margin of the header. When I create the border, it surrounds the text and the top padding. Is there a way to apply a border around the text only?
The complete code is on JSFiddle here.
The CSS code is here:
header {
background-image: url("https://images.pexels.com/photos/8263/pexels-
photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
h1 {
color: black;
text-align: center;
display: block;
font-size: 50px;
padding-top: 180px;
margin: 0;
}
Is this what you are after?
Below is the code that was used to get the effect. You can have a play with the padding and margins for the H1 to space it out if you want.
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
padding-top: 180px;
text-align:center;
}
h1{
color: white;
text-align: center;
font-size: 50px;
padding:0px;
border:1px solid #000000;
display:inline-block;
margin:0 auto;
line-height:40px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
<body>
<header>
<h1>Guitar Covers</h1>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
I went a different rout and created a wrapper around the H1 with the padding-top
https://jsfiddle.net/9ss2g8eL/1/
<body>
<header>
<div id="h1_surround">
<h1>Guitar Covers</h1>
</div>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
#h1_surround{
padding-top:180px;
}
h1{
color: white;
text-align: center;
display: block;
font-size: 50px;
margin: auto;
border:1px solid #FF0000;
width:350px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
Related
I have a Button with a background-image and a text that is more than the width of the image.
How to place the image in the middle of the text
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background: url('http://127.0.0.1/pics/item/c1763.png') no-repeat;
background-size: 100% 100%;
border: none;
color: black;
font-size: 16px;
width:60px;
height:60px;
padding-top:60px;
white-space: nowrap;
background-position: center center;
display: flex;
}
</style>
</head>
<body>
<button class="button">Button text test</button>
</body>
</html>
Button image
Hope this help you.
.button {
background: url('https://i.stack.imgur.com/GxHaN.jpg') no-repeat;
background-size: 100% 100%;
border: none;
color: black;
font-size: 16px;
width: 60px;
height: 60px;
white-space: nowrap;
background-position: center center;
display: flex;
}
<button class="button">Button text test</button>
The final solution is determine the actual width of the image and to specify the width of the button for the text
.button2 {
background-color: transparent;
background-image: url('http://127.0.0.1:25005/pics/item/c1763.png');
background-size: 60px 60px;
background-repeat: no-repeat;
border: none;
font-size: 16px;
height: 60px;
width: 150px;
text-align: center;
padding-top: 60px;
white-space:nowrap;
background-position: center top;
}
I need to have a image on div background. Over this image, its mandatory to have one title, subtitle and a button.
All these three elements need to have top and left in % for dynamic position.
I had made several tries, but without success.
HTML
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
<div id="link">
See all jeans
</div>
</div>
</div>
CSS
#block1 {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
}
#block1 #subtitle {
font-size: 16pt;
color: white;
position: absolute;
top: 23.4%;
left: 43.5%;
letter-spacing: 1px;
}
#block1 #link {
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-size: 11pt;
top: 29.3%;
left: 41.3%;
position: absolute;
}
#block1 #link a {
color: white;
text-decoration: none;
font-weight: 100;
}
#media only screen and (min-width : 768px) {
#block1 #title{
top: 12%;
left:42%;
font-size:80%;
}
}
#media only screen and (min-width : 992px) {
#block1 #title {
font-size: 100%;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
}
#block1 #title {
font-size: 97px;
color: white;
position: absolute;
top: 16.5%;
left: 42%;
letter-spacing: 2px;
}
Link to jsffidle: https://jsfiddle.net/jggscada/
instead of positioning each element individually , i suggest you give position:absolute to #block1 and position it on the image ( image as background to #container or make another div surrounding the #block1 div ) .
i used top:40vh -> vh=viewport height
and then position the elements inside the block1 as you desire.
also i deleted the #link div and added styles directly to the link instead. seems more logical this way :) . if you want a link to behave like a div use display:block , in this case i used display:inline-block
VERY IMPORTANT : do not use fixed width and height if you want something to be responsive. i used width:100vw on .container so it has the width of the screen.
see snippet below or fiddle here > Jsfiddle
let me know if it works for you
#container {
background-image: url('http://tiffosi.com/fw16/img/img1.jpg');
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 1450px;
max-width: 1086px;
max-height: 1450px;
position: relative;
top: 0;
left: 0;
border: 1px solid red;
}
#block1 #title {
font-family: oswald-bold;
font-size: 60pt;
color: white;
letter-spacing: 5px;
}
#block1 #subtitle {
font-family: oswald-bold;
font-size: 16pt;
color: white;
letter-spacing: 1px;
}
#block1 a{
width: 184px;
text-align: center;
height: 43px;
line-height: 43px;
border: 1px solid white;
font-family: Oswald-Medium;
font-size: 11pt;
color: white;
text-decoration: none;
font-weight: 100;
display:inline-block;
margin-top:50px;
}
#block1 {
position:absolute;
top:40vh;
left:0;
margin:0 auto;
right:0;
text-align:center;
}
<div id="container">
<div id="block1">
<div id="title">LIAM</div>
<div id="subtitle">SUPER SLIM FIT</div>
See all jeans
</div>
</div>
the background of the "main" part of the homepage(marked in red), should be black but because of the image, it cannot be seen. This is my code:
body {
color: white;
font-family: futura;
background-color: black;
font-size: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
background: url(Website_Bilder/background.png)
no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
head {
font-size: 30px;
display: block;
position:relative;
background-position: center;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
section {
font-size: 15px solid #a0a0a0;
border: 50px;
padding: 0%;
clear: ;
margin: 1em auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* link color */
li a:hover {
background-color: #111;
}
img {
width: 100%;
float: center;
height: auto;
max-width:100%;
display: block;
margin: 1em auto;
left:0px;
top:100px;
z-index:-1;
}
p {
padding 10px 20px 10px 20px;
margin 20px;
}
and this is what I get:
/I made better screenshot and added more code
In case that I understand you correctly: You want your red bordered area to have a black background instead of the image that is defined as background in your CSS body selector? Then you just have to define a new CSS class/id for the html tag that surrounds this area, like this:
html, body {
height: 100%;
width: 100%;
}
body {
color: white;
font-family: futura;
background-color: black;
font-size: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
background: url(http://tub.tubgit.com/reimg/resize-img.php?src=http://photos.up-wallpaper.com/images251/jdicnfzws24.jpg&h=1080&w=1920)
no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
div.redArea {
min-width: 70%;
height: 100%;
background-color: black;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="redArea">
<p>this is a test</p>
</div>
</body>
</html>
The width of the redArea class has to be defined as min-width because you have set the max-width of your body selector to 700px.
I'm making some coding, where I'd like to hover over anywhere on an image to access a hover. but I don't want an entire block of coloured semi-transparent padding to cover the picture, only a thin solid-coloured strip.
To make this happen, I created a container for the div and put the smaller, solid-coloured div inside it. However, the background to the container (the image) isn't showing up. I assume this is because the div hasn't got any content other than the smaller div.
How can I fix this?
<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
<div class="dewisidebar">
<div style="background-image: url('http://placehold.it/80x350'); width: 80px; height: 350px;">
<div class="dewisidecontainer"><div class="dewisidelinks">
Three<br>Links<br>Here
</div></div></div></div>
<div class="dewitracker">
Information here
</div>
</div></center>
<style type="text/CSS">
.dewisidebar {
width: 80px;
height: 350px;
vertical-align: top;
background: #ff80c4;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
.dewisidecontainer {
width: 80px;
height: 350px;
padding: 130px 0px 0px 0px;
background: none;
opacity: 0.0;
}
.dewisidecontainer:hover {
opacity: 1.0;
}
.dewisidelinks {
width: 80px;
height: auto;
background: #ff80c4;
font-family: Arial;
font-size: 15px;
color: black;
line-height: 130%;
padding: 5px 0px;
}
.dewitracker {
width: 370px;
height: 350px;
vertical-align: top;
background: #c4ff80;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
</style>
Please help :)
Took out the extra div you created and added the background to the dewisidebar.
In the CSS I made the background-size 100% 100% meaning that the width and height will be full length of its div.
http://jsfiddle.net/davygxyz/5hxdznz0/
HTML
<center><div style="width: 500px; height: auto; background: #80c4ff; padding: 10px;">
<div class="dewisidebar">
<div class="dewisidecontainer"><div class="dewisidelinks">
Three<br>Links<br>Here
</div></div></div>
<div class="dewitracker">
Information here
</div>
</div></center>
CSS
.dewisidebar {
width: 80px;
height: 350px;
vertical-align: top;
background: #ff80c4;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
background-image: url('http://placehold.it/80x350');
background-repeat:no-repeat;
background-size:100% 100%;
}
.dewisidecontainer {
width: 80px;
height: 350px;
padding: 130px 0px 0px 0px;
background: none;
opacity: 0.0;
}
.dewisidecontainer:hover {
opacity: 1.0;
}
.dewisidelinks {
width: 80px;
height: auto;
background: #ff80c4;
font-family: Arial;
font-size: 15px;
color: black;
line-height: 130%;
padding: 5px 0px;
}
.dewitracker {
width: 370px;
height: 350px;
vertical-align: top;
background: #c4ff80;
padding: 10px;
display: inline-block;
font-family: 'times new roman';
size: 10px;
color: black;
}
I have an <H2> with a background that has rounded corners. I'm looking for a way to create a 1px line that moves from the box to end of the container at the right. Does anyone have an idea?
Well, I finally gave up and stuck some divs in my h2. :(
CSS
#content h2 {
background: url(../images/bg-page-title.png) -900px 0px no-repeat;
font: 1.4em Georgia, Times, Arial bold;
height: 40px;
margin: 0px 20px;
text-transform: uppercase;
}
#content h2 .head {
background: url(../images/bg-page-title.png) no-repeat;
float: left;
padding: 8px 20px;
height: 100%;
}
#content h2 .tail {
background: url(../images/bg-page-title.png) -857px 0px no-repeat #ffffff;
float: left;
height: 100%;
width: 15px;
}
HTML
<h2>
<div class="head">Find A Job</div>
<div class="tail">& nbsp;</div>
</h2>
Include the line in the background image