I have a CSS entry that looks like this:
.header {
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
border-bottom:1px solid #eaeaea;
}
How can I add the link to the the background image in that CSS?
The full CSS can be found here and the html that uses is there.
Try wrapping the spans in an anchor tag and apply the background image to that.
HTML:
<div class="header">
<a href="/">
<span class="header-title">My gray sea design</span><br />
<span class="header-title-two">A beautiful design</span>
</a>
</div>
CSS:
.header {
border-bottom:1px solid #eaeaea;
}
.header a {
display: block;
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
}
Using only CSS it is not possible at all to add links :) It is not possible to link a background-image, nor a part of it, using HTML/CSS. However, it can be staged using this method:
<div class="wrapWithBackgroundImage">
</div>
.wrapWithBackgroundImage {
background-image: url(...);
}
.invisibleLink {
display: block;
left: 55px; top: 55px;
position: absolute;
height: 55px width: 55px;
}
You can not add links from CSS, you will have to do so from the HTML code explicitly. For example, something like this:
<li id="header"></li>
Related
I'm having a problem on img:hover
Here's my jsbin: http://jsbin.com/bereputu/1/edit
My problem is when I put my mouse over the "home" or "contact", the image that I want to replace the original appears a little under than I expected.
Here's my code:
<html>
<head>
<title>UltraLotus</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="images/header.png">
</div>
<center>
<div class="nav">
<img src="images/home.jpg">
<img src="images/contact2.jpg">
</div>
</center>
<div class="page">
<p></p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
body {
background-image: url("images/bg.jpg");
background-repeat: repeat-y;
background-size: 100% 100%;
margin:0;
padding:0;
height:100%;
}
.container {
min-height: 100%;
}
.header {
background-color:#1a1a1a;
width:100%;
height:100px;
}
.header img {
position: relative;
margin-top:-30px;
}
.nav {
position:relative;
width:100%;
height:40px;
top: -15px;
background-image: url("images/nav.jpg");
}
.nav img {
position:relative;
margin-top:13px;
}
.nav a:first-child:hover {
position:relative;
background-image: url('images/home.jpg');
}
.nav a:nth-child(2):hover {
position:relative;
background-image: url('images/contact.jpg');
}
.page {
padding-top:5px;
top:150px;
padding-bottom:70px;
}
.footer {
position:absolute;
bottom: 0;
width:100%;
height:70px;
background-image: url("images/footer.jpg");
}
I'm not quite sure what you're looking to accomplish with the :hover styling, but it's replacing a totally different image than the one you're using in your original nav element.
For easier debugging, if you open up the chrome developer tools, you can force a hover state so you can look at all the applied css rules:
You'll notice that you're giving your a element a background-image on hover, but it's contents still contains an img element. Thus the double styling.
Note 1: Since they're both the same, you really don't even need the hover styling at all.
Note 2: This does not seem worth pulling in an image to me. You should be able to accomplish this exact style with native html an css. They render far quicker, they're much easier to download, they're much better for screen readers, they have much cleaner and clearer content, and they extend and adapt much easier. I'd skip the images altogether and go html/css for this.
Here's a little CSS to get your started:
.nav a {
color: grey;
font-size: 1.2em;
text-decoration: none;
border: 1px solid grey;
padding: 5px;
padding-bottom: 0px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* I even added in a little hover effect */
.nav a:hover {
background-color: #2C2C2C;
}
Here's your full site design without any images (except your logo):
http://jsbin.com/bereputu/2/
You can get much more sophisticated but I would avoid imaging out your design as much as possible. If you're doing web dev, learn CSS
I want to made like when hover, active and visited, the image will change to another image, any method?
Now i put the image under background, cause when i put the image, the word will come down, i want to made the word overlap the image, but can't...
if can please explain why need to style like this... i just learn to use html so i want to understand more about it, thanks
<div class="navBar" style="margin-left:80px;padding-top:40px;"><!--navBar-->
<div id="navbar" >
<div id="navhome" style="width:100px;height:60px; padding-top:30px; padding-left:10px"> HOME </div>
</div>
<div id="navbar">
<div id="navhistory" style="width:130px;height:60px; padding-top:30px; padding-left:10px;"> ABOUT US </div>
</div>
<div id="navbar">
<div id="navevent" style="width:130px;height:60px; padding-top:30px; padding-left:10px"> EVENT </div>
</div>
<div id="navbar">
<div id="navcontact" style="width:130px;height:60px; padding-top:30px;"> CONTACT US </div>
</div>
</div>
<!--navBar-->
css:
.navBar {
font-family: KaiTi;
font-size: 22px;
color: #6c2e13;
text-align: center;
float: left;
}
#navbar {
float: left;
margin-right: 5px;
margin-left: 5px;
}
#navhistory {
background-image: url(../img/nav2.png);
background-repeat: no-repeat;
}
#navevent {
background-image: url(../img/nav3.png);
background-repeat: no-repeat;
}
#navcontact {
background-image: url(../img/nav4.png);
background-repeat: no-repeat;
}
#navhome {
background-image: url(../img/nav1.png);
background-repeat: no-repeat;
}
First thing if you want to apply active, visited styles then you need to apply the background images to the anchor tag. So that you can easily update the background image using CSS. At present you are applying background for the div. It means you want to modify the parent element when hover, active or visited actions happened. Using CSS, from child element you can't modify the parent element.
So check my fiddle I have modified your code and applied the same when hover, visited and active actions happened.
Some Sample code:
#navhistory a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/linear3.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}
#navevent a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/radial1.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}
#navcontact a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/linear1.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}
#navhome a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/radial3.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}
FIDDLE DEMO
If you want hover effect, than use :hover psaudo-class on that element and just change background image. JSFiddle
.button {
background: url(../img/nav1.png) no-repeat;
}
.button:hover{
background: url(../img/nav1_hover.png) no-repeat;
}
NOTICE: don't style elements directly (directly writing to style attribute. Since you have repeating elements, use class='someClass subclass sub-subclass' and than just apply style in .css file to all elements with that class:
.someClass {
width: 10px;
height: 20.5%;
padding: 0;
margin: .5em;
}
.someClass.even {
color: red;
}
.someClass.odd {
color: green;
}
I'm trying to get rid of many divs on my page so I wonder if this "tile" could be done without using one.
Something like this:
<a href="mks.html" class="big-tile big-tile-1">
<h1>town<br>
library</h1>
</a>
The anchor tag would have a background: url(big-tile-1) top no-repeat; I guess. Big-tile would have static width and height. But how do I style the h1? Can You help me please?
You could do something like this: JSFiddle Demo
CSS
.big-tile {
border:10px solid #ccc;
display:inline-block;
position:relative;
height:200px;
width:200px;
color:#fff;
background:url("http://lorempixel.com/400/200/nature/");
}
.big-tile h1 {
margin:0;
background:teal;
position:absolute;
padding:20px;
bottom:0;
left:0;
right:0;
}
Or if you want the image in the markup and not as a background image - you could do this : http://jsfiddle.net/UFUq5/3/
Demo Fiddle
HTML
<a href="#">
town<br />
library
</a>
CSS
a {
display:inline-block;
height:450px;
width:300px;
background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
background-color:teal;
background-size:300px 300px;
background-repeat:no-repeat;
padding-top:350px;
padding-left:50px;
box-sizing:border-box;
color:white;
text-decoration:none;
font-family:arial;
font-size:20px;
border:10px solid #c0c0c0;
}
technically, you wouldn't need to use the big-tile-1 class. but you could do something like this: http://jsfiddle.net/RU23A/1/
with a couple changes:
1. add an image to the background url
2. change the font to whatever that font is.
You can do this:
<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> town <br> library </h1>
</a>
then your css:
#image-overlay{
width: 300px;
height: 500px;
position: relative;
border: 10px #999 solid;
border-radius: 1px;
}
#image-overlay h1{
position: absolute;
bottom: 0;
left: 0;
background-color: green ////whatever your choice
color: white;
padding: 10px;
font-family: //your choice
font-size: 20px;
}
I have got a little problem with setting a background image for <button>.
Here is the html I have got on site:
<button id="rock" onClick="choose(1)">Rock</button>
And here is the CSS:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
}
button #rock {
background: url(img/rock.png) no-repeat;
}
I don't know why the button's background is still white.
Astonishing that no answer addresses or mentions the actual problem here.
The CSS selector button #rock says "give me an element with the id rock inside a <button> element", like this:
<button>
<span id="rock">This element is going to be affected.</span>
</button>
But what you wanted is a <button> element with the id rock. And the selector for that would be button#rock (note the missing space between button and #rock).
And as #Greg already mentioned: #rock is already specific enough to target the button and could be used on its own.
For some odd reason, the width and height of the button have been reset. You need to specify them in the ID selector as well:
#rock {
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
Live test case.
You need to call CLASS in button
<button class="tim" id="rock" onClick="choose(1)">Rock</button>
<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
Replace
button #rock
With
#rock
No need for additional selector scope. You're using an id which is as specific as you can be.
JsBin example: http://jsbin.com/idobar/1/edit
Delete "button" before # rock:
button #rock {
background: url(img/rock.png) no-repeat;
}
Worked for me in Google Chrome.
Try changing your CSS to this
button #rock {
background: url('img/rock.png') no-repeat;
}
...provided that the image is in that place
To get rid of the white color you have to set the background-color to transparent:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
background-color: transparent; /* like this */
}
You absolutely need a button tag element?
because you can use instead an input type="button" element.
Then just link this CSS:
input[type="button"]{
width:150px;
height:150px;
/*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 150px 150px;
}
<input type="button"/>
try this way
<button>
<img height="100%" src="images/s.png"/>
</button>
I have used the following image as background image for link.
If I hover over the image the link display in the edges also. I just want to show the link for exact round image and not for the blank edges. Is there any possibility to do this in css?
css:
.buy_purple a{ background-image:url(../imagesf/buy_purple.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}
Html:
<div class="buy_purple">BUY</div>
Hey are you looking like this :-
http://tinkerbin.com/yY4FzaZr
HTML
<div class="buy_purple">BUY</div>
CSS
.buy_purple a{ background-image:url(http://i.stack.imgur.com/wC3xc.png); width:81px; height:57px; background-repeat:no-repeat; float:right; font-size:20px; font-weight:bold; text-shadow: 1px 1px 2px #c9a3c2; text-align:center; padding-top:29px; color:#000;}
.buy_purple a:hover {
background:url(http://i.stack.imgur.com/C4Jia.jpg) no-repeat 1px -5px;
}
or your are looking in pure css
you can do this using pure css
Here the html
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Small-city-symbol.svg">
</div>
Here the css
img {
border: 1px solid red;
border-radius: 169px 169px 169px 169px;
width: 200px;
height: 200px;
}
a {
height: 0px;
}
Here the demo : Fiddle
I think you should use map tag
<img src="test.png" alt="test" usemap="links"/>
<map name="links">
<area shape="circle" coords="your image co-ords(centerX,centerY,Radius)" href="your link" />
</map>
If you get your image to be square and perfectly centered, you can just use the border-radius property, which will affect the effective clickable area as well.
a{
...
display: block;
border-radius: 40px; /* if the height+width are 80px */
}
Example: http://jsfiddle.net/tvJMG/