I know people been asked similar questions but I couldn't find the right answer for my issue. So I am asking public to help with my issue. I have a img folder and i have a search.png image in it. Its a search icon that I am trying to use it for my youtube search API page. So the problem that I am having is when I put the search.png to my background: url(../img/search.png) its not showing up at all, instead its empty square box. I will attach my code below. Please dont dislike my issue question I really need an answer.
*{
padding:0;
margin:0;
}
body{
font-family:"Segoue",sans-serif;
line-height:2em;
color:#000000;
background:#e1e1e1 url(../img/red.jpg) fixed;
background-repeat: no-repeat;
/*background-position: cover;*/
background-size: cover;
font-size:13px;
}
a{
color:#333;
text-decoration:none;
}
#container{
/*height: 100px;*/
width:740px;
background:#f4f4f4;
opacity: 0.9;
margin:auto;
margin-top: 300px;
/*border: 2px solid black;*/
}
.clearfix{
clear:both;
}
header{
padding:30px 20px;
background:#f4f4f4;
}
header h1{
color:#001373;
margin-bottom:5px;
}
header span{
color:#000000;
border: 1px solid black;
border-radius: 5%;
background-color: #007EFF;
padding: 8px;
}
section{
padding:30px 20px 20px 20px;
}
footer{
padding:20px;
background:#f4f4f4;
text-align:center;
}
#search{
display: block;
margin-bottom: 15px;
}
.fieldcontainer{
display: block;
position: relative;
width: 90%;
margin: 0 auto;
}
#search-btn{
position: absolute;
right: 360px;
top: 5px;
height: 32px;
width: 32px;
border: 0;
cursor: pointer;
zoom: 1;
filter: alpha(opacity=65);
opacity: 0.65;
background-image: transparent url(../img/search.png) top-left no-repeat;
}
#search-btn:hover{
filter: alpha(opacity=90);
opacity: 0.9;
}
.search-field{
box-sizing: border-box;
display: block;
width: 45%;
padding: 7px 17px;
padding-right: 43px;
background-color: #BBB3F7;
color: #75026C;
font-weight: bolder;
border-radius: 1px solid black;
font-size: 1.6em;
border-color: #00B5ED;
border-radius: 1px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
}
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Search<span>Vidz</span></h1>
<p>Search all Youtube videos</p>
</header>
<section>
<form id="search-form" name="search-form" onsubmit="return search()">
<div class="fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search YouTube...">
<input type="submit" name="search-btn" id="search-btn" value="">
</div>
</form>
<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright © 2014, All Rights Reserved</p>
</footer>
</div>
</body>
</html>
check the image file extension!
You write "search.jpg" in your code. Change to "search.png"
The issue is syntax, you have background-image: transparent url(../img/search.png) top-left no-repeat;, but all properties should be assigned to the shorthand background:, background-image expects only the image (url). Additionally, the position should not be "top-left" but "top left" (two words)
Correct version of that line should be:
background: transparent url(../img/search.png) top left no-repeat;
Hope this helps
Related
I am a beginner working on a front end project with HTML and CSS where on my website I have a welcoming picture which I include below :
I try to adjust the brightness of the image for better contrast using filter:brightness() on my image
However when I apply filter:brightness(50%); the brightness of the image obviously decreases but I lose the display of my logo on the left and my navbar on the right. I do not understand why this is happening and I would appreciate your help. My code :
.html,.body{
background-size: cover;
}
body{
overflow-x: hidden;
margin:0;
background: rgba(0, 0, 0, 0.1);
font-family: Arial, Helvetica, sans-serif;
}
.welcome-container{
position: relative;
top:0px;
left: 0px;
width:100%;
height:550px;
margin:0px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.welcome-pic{
position: relative;
}
.welcome-pic h5{
position: absolute;
top:0%;
left:6%;
}
#fly{
font-size: 55px;
}
.welcome-pic img{
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
}
#welcome-plane{
filter: brightness(50%);
}
#book{
position: relative;
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
top:50%;
left:30%;
cursor: pointer;
}
.square-container{
position: absolute;
top: 2px;
left: 2%;
}
.ds-square{
background-color: red;
height: 50px;
width:50px;
opacity:1;
}
.ds-square span{
position: relative;
top:30%;
left:27%;
color:white;
font-size:20px;
}
.welcome-pic img {
width:100%;
height:550px;
opacity: 1;
}
.inside-pic{
position:absolute;
top:30%;
left:50%;
font-size: 60px;
transform: translate(-50%, -50%);
}
.welcome-pic ul{
position: absolute;
top:2px;
right:0%;
margin:0;
padding:0;
overflow:hidden;
background-color: transparent;
}
.welcome-pic li{
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:20px;
}
.inside-pic h3{
font-size:18px;
}
<div class = "welcome-container">
<div class = "welcome-pic">
<h5>DS <br/> AIRLINES</h5>
<div class="square-container">
<div class="ds-square">
<span id = "DS">DS</span>
</div>
</div>
<ul>
<li><a class="active" href = "#home">Home</a></li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src = "IMAGES/welcome_pic.jpg" alt="#" id = "welcome-plane">
<div class = "inside-pic">
<span id = "fly">FLY WITH DS <br/> AIRLINES</span>
<h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3>
<button id = "book">Book flight</button>
</div>
</div>
</div>
Thank you in advance.
You can use below code in your css (made image as background of div)
.welcome-pic{
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("IMAGES/welcome_pic.jpg") no-repeat center;
background-size: cover;
}
Make sure you remove img tag from your html.
You can adjust rgba values (alpha values) to specify brightness level.
It looks like you have a z-index layering issue. Use this css:
.welcome-pic{
z-index:0;
}
.square-container {
z-index: 1;
}
.welcome-pic ul {
z-index: 1;
}
Here is the codepen: https://codepen.io/ladywebhawk/pen/NWNPNzN
I am having an issue with resizing and a div. When I resize the browser, then scroll over to the right, I see that the bottom div is not extending all the way despite my width at 100% I have tried position and width tags and am at a loss. Any ideas? The form is moving into the white space and not sticking to the background div area.
https://codepen.io/CaptainMattyP/pen/mdJRKpo
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
}
#footer-info1 {
color: white;
padding: 80px 0px 0px 150px;
positon: absolute;
}
#copyright {
color: white;
padding: 0px 0px 0px 900px;
positon: absolute;
}
#contact-info {
padding: 20px 10vw 0px 1600px;
position: absolute;
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
</section>
</main>
I'm going to take a guess here that you have a very wide monitor that you are doing most of your work on. You have hard coded almost all of the padding and margins used in your code to place the different items on the page. This is the root of your problem. When you put something to width: 100% what is actually occurring is you are telling the browser to give a width of 100% of the current screen size. This means it will be subjective to the size of the browser that is displaying the page. The rest of your padding and margins though are set to a hard pixel value. Combine these two different display styles together and you can have a page that displays different portions off of the initial screen.
I think you might want something closer to this. I do still use hard coded padding values, but they are padding based on dynamic values instead of absolute values so it allows for easier reflowing and resizing of the page so it looks better for more screen sizes.
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
white-space: nowrap;
text-align: right;
padding-right: 10px;
padding-top: 10px;
margin: 0px;
}
li {
color: white;
display: inline;
padding-left: 10px;
}
#welcome-section {
padding-bottom: 40px;
text-align: center;
}
.picture {
border-radius: 50%;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
overflow: auto;
}
#footer-info1 {
color: white;
text-align: right;
padding-right: 10px;
float: right;
}
#email-section {
float: left;
padding-bottom: 10px;
padding-left: 10px;
}
.block {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="email-section">
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</div>
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
<div id="copyright">
#Matthew Paciello
</div>
</div>
</section>
</main>
If I'm reading this right, I suggest adjusting the bottom area and use a flex like so:
body {
width: 100%;
margin: 0px;
background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
background-attachment: fixed;
font-family: 'Ubuntu Condensed';
right: 0px;
}
h1 {
text-align: center;
padding: 200px 0px 0px 1320px;
position: absolute;
white-space: nowrap;
}
#navbar {
height: 50px;
width: 100%;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-color: rgb(80, 80, 86);
border-bottom: solid;
border-width: 1px;
border-color: black;
position: fixed;
top: 0px;
z-index: 5
}
a,
.white {
text-decoration: none;
color: white;
}
a:hover {
color: limegreen;
}
ul {
padding: 0px 0px 0px 1160px;
white-space: nowrap;
}
li {
color: white;
display: inline;
padding: 40px;
}
#welcome-section {
height: 800px;
}
.picture {
margin: 300px 0px 0px 1340px;
border-radius: 50%;
position: absolute;
z-index: 1;
box-shadow: 10px 10px 10px grey;
border-style: solid;
border-width: 1px;
}
#footer {
height: 230px;
background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
background-size: auto;
border-top: solid;
bottom: 0px;
right: 0px;
border-width: 1px;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
#footer-info1 {
color: white;
}
#copyright {
color: white;
}
#contact-info {
}
.block {
display: block;
}
#media (max-height: 100%) {
#welcome-section {
height: 800px;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
<main>
<nav id="navbar">
<ul>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
<li>FCC Profile</li>
</ul>
</nav>
<h1>Hi, I'm Matt. <br>Future Front-End Developer.</h1>
<div id="welcome-section">
<img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">
</div>
<section id="footer">
<div id="footer-info1">
Matthew Paciello <br><br> 561-305-5761
<br> Boca Raton, FL<br> mpaciell#gmail.com
</div>
<div id="copyright">
#Matthew Paciello
</div>
<form style="display: block" id="contact-info">
<label for="email" class="white">E-mail Address:
<input id="email" type="email" name="emailaddress" class="block">
</label>
<label for="inquiry" class="white">Comments or Inquiries:
<textarea rows="8" cols="25" style="resize: none" class="block">
</textarea>
</label>
<button type="submit">Submit</button>
</form>
</section>
</main>
Your footer is 100% but:
The form in your footer have a 10vw padding-right which make the page horizontally scrollabe. And that white space on your right. either bring the form more to the left by reducing the padding-left or padding-right.
The position of the image is set by margin-top and margin-left which also plays a roll in making the page horizontally off, and scrollable. You can bring the image closer to the left by reducing margin-left of it. Or use other methods to center the image, if necessary.
I am trying to position the search bar on a background image. I am also trying to position a button at the bottom and center of the image. Following that, I will have containers.
What I am trying to achieve.
But what I am stuck and confused with positioning. The glyphicon is not working as well?
My Code
<style>
.card {
border: 0px solid;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius: 0px;
}
.container-fluid {
width: auto
}
.container-fluid.drop-shadow {
margin-top: 2%;
margin-left: 5%;
margin-right: 5%
}
.img-fluid {
height: 200px;
}
#child {
width: 100%;
height: 20px;
margin: auto;
text-align: center;
bottom: 0px;
position: absolute;
}
.btn-checkin {
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
</style>
</head>
<body id="page-top">
<div class="card">
<img class="img-fluid" src="img/1847p.png" alt="Card image cap">
<div class="col-md-5">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
</div>
<div id="child">
<button class="btn-checkin">Check in</button>
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
</div>
Problems to target :
Get the search bar on the background pic
Set the background pic always on top of the screen with full width but with certain height. I currently hard coded the height to 200px. Is there a way that it can be responsive?
I am also stuck with the glyphycon issue, why is it not displayed?
How do I position the button at the bottom of the image and in the
center?
Use margin-top with negative value to make the form goes on the image.
Glyphicons look to be working great simply here.
* {
box-sizing: border-box;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 80%;
margin: 0 auto 20px;
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#email, label[for="email"] {
display:inline-block;
vertical-align: middle;
}
input#email {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="email"] {
width: 40px;
line-height: 40px;
}
button#btn-checkin {
display: inline-block;
padding: 6px 10px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>
<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />
<div id="form-box">
<form>
<div id="input-group">
<label for="email" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Class" id="email">
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<br/>
<br/>
<br/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
.img-fluid {
height: 200px;
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body id="page-top">
<div class="card" >
<!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search Class" class="form-control" id="email">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
<button class="btn-checkin">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid drop-shadow">
<div class="row">
frsjafksdalkdfsa
</div>
fsdfdasasd
</div>
</div>
Try this code...If you need any help, let me know.
Ok so you want to position the search bar inside a image.
Make a div with the image as background
background: image_source;
background-size: contain;
position: relative; //must to write
width: 100%;
height: 100px; //as much as you want
Then the css for search bar
position: absolute;
then use top, left,etc to position the search bar
so i am trying to get an overlay to work on my website, i've been watching a tutorial, but now i have gotten to a point where i don't know what i'm doing wrong.
<head>
<link rel="stylesheet" href="css/venues.css">
</head>
<section class="alt-section">
<h2> Places we've played.</h2>
<div class="thumb-container">
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Bar 42</strong>
<div class="zoom-icon">
</div>
</div>
</a>
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>The Prince Albert</strong>
<div class="zoom-icon">
</div>
</div>
</a>
</div>
</section>
and the css is..
.alt-section{
background-color: #e6e6e6;
margin: 0 auto;
}
.alt-section h2{
padding:50px;
color: #e1c184;
font-family: Spliffs;
text-align: center;
font-size: 35;
}
.alt-section a{
font-family: sans-serif;
padding:10px;
font-size: 18px;
text-decoration: none;
color: #cd9732;
}
.alt-section a:hover{
color: #e1c184;
}
.thumb-container{
max-width: 960px;
margin: 0px auto;
padding-bottom: 100px;
overflow: hidden;
}
.thumb-unit{
display:block;
width: 150px;
float:left;
position: relative;
height: 150px;
background-image: url(http://i.imgur.com/3VTqQ8M.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.thumb-overlay{
position:absolute;
top:100%;
left:0px;
right:0px;
bottom:null;
height:100%;
background:rgba(205,151,50,0.5);
}
.thumb-overlay:hover{
position:absolute;
top:0%;
left:0px;
right:0px;
bottom:null;
background:rgba(205,151,50,0.5);
transition: linear;
transition-duration: 0.5s;
}
The youtube video has got me up to a point where they have completed it but i am still stuck on this. https://www.youtube.com/watch?v=ygvo1_kqVUg
So my actuall problem is to do with the size of a hitbox on an anchor tag i cant seem to increase the size so when i hover over it the overlay will pop up.
I have turned the overflow back to visible so you can see my problem, but when i scroll over the photo the overlay will not pop up its only when i hover over the writing will it then come up.
#element-with-background-image {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>
The webpage is this: http://www.peliculadicto.tk/
Every time i resize my window, the text inside the color grey bar with position: fixed at the upper, moves to sides. It never stays centered. How can i prevent this?
HTML
<div class="headbar">
<h1 id="logo">
Películas buenas
</h1>
<div id="menu">
<ul>
<li>Inicio</li>
<li>Peliculas</li>
<li>Estrenos</li>
<li>Ranking</li><li>Proximamente</li>
<li>Más vistas</li>
</ul>
(search) <div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="url"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>
</div>
</div>
CSS
.uwpqsf_classsr {
margin-bottom: 1px;
clear: both;
position: absolute;
bottom: 2.5px;
left: 57px;
}
.headbar {
position:fixed;
top: 0px;
left: 0px;
height: 42px;
width: 100%;
background-color: #9B9595;
background-image: -moz-linear-gradient(#B6AAAA,#000000);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
background-image: -o-linear-gradient(#B6AAAA,#000000);
border-bottom: 1px solid #A29A9A;
z-index: 3000;
opacity: 0.65;
}
#menu {
position: absolute;
min-width: 700px;
left: 221px;
}
#menu>ul>li {
float:left;
position:relative;
height:27px;
left:370px;
}
It's the
#menu {
left: 221px;
}
that's doing it.
this is happened because of left:221px in a #menu. you can use a float:right for to fix a div at right side.
It is because the left is set to fixed px. When the Window resizes, the space looks larger but in fact the space stays the same and it's the window that becomes smaller. Try using percent.
Well, maybe i didn't explain myself.
However, i've already fixed, took a very large time to figure out. Time for me and anyone who wants to compare:
CSS
.headbar {
position:fixed;
width: 100%;
height: 42px;
margin: 0px auto;
background-color: #9B9595;
background-image: -moz-linear-gradient(#B6AAAA,#000000);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
background-image: -o-linear-gradient(#B6AAAA,#000000);
border-bottom: 1px solid #A29A9A;
z-index: 3000;
opacity: 0.65;
}
#menu {
margin: 0px 332px 0px auto;
width: 48%;
position: relative;
right: 178px;
}
#menu>ul>li {
float:left;
height:27px;
margin-top:13px;
}
.uwpqsf_classsr {
}
input#uwpqsf_id_keysr {
color: #FFFFFF;
width:277px;
height:30px;
padding-left: 32px;
background: rgba(56, 53, 53, 0.12) url(/lupa.png) no-repeat;
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 3px; -moz-border-radius: 3px;
}
HTML
<div class="headbar">
<h1 id="logo">
Películas buenas
</h1>
<div id="menu">
<ul>
<li>Inicio</li>
<li>Peliculas</li>
<li>Estrenos</li>
<li>Ranking</li><li>Proximamente</li>
<li>Más vistas</li>
</ul>
</div>
<div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="http://www.peliculadicto.tk/"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>
</div>