I am attempting to display a background non-repeated picture on the top right corner of my div. I am using the following code
<html>
<head>
<style>
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
.UseA .dta
{
display:block;
border-radius: 10px;
width:130px;
background-color:grey;
color:white;
position:relative; /*Relative to normal position*/
left:160px; /*Move away from left*/
}
</style>
</head>
<body>
<div class="UseA">
Hello , My name is Jim
<div class="dta">something here</div>
</div>
</body>
</html>
However The image is not being displayed.
I am trying this code out here Any suggestions on what I might be doing wrong ?
You declare background: #BADA55; after background-image, so it's overwriting it.
Try this instead:
UseA {
display:block;
text-indent:10px;
border-radius: 10px;
background: #BADA55 url('paper.gif') no-repeat top right;
min-height:50px;
width:300px;
}
You're overwriting background-image with background. Combine them:
http://jsfiddle.net/isherwood/ANr6K/
background: url('image.png') right top no-repeat #BADA55;
If your papaer.gif asset is correct, then remove your background color for .UseA
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
Change to
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
min-height:50px;
width:300px;
}
Sample on Fiddle using Google image as a background: http://jsfiddle.net/C9qdL/
Related
Two images each 50% width. I want to hover on the left image and it should widen to 52% over the right image. The right image should not move. Hover the right image and it should widen to 52% over the left image and the left image should not move.
Two issues...
1. The hover over the left image works but moving off it, it doesn't transform gracefully back to 50% but instead, it jumps back as if no transition effect is applied.
2. hovering the right image moves the right image to the left instead of expanding it.
CSS is shown here and I can't seem to identify what part(s) is/are incorrect so I am asking for help.
<style>
body{
box-content: border-box;
}
.photo_section_new {
display:flex;
}
.photo_section_new > div {
height:800px;
flex-grow:1;
transition:0.5s;
background-size:cover;
background-position:center;
background-repeat: no-repeat;
}
.photo_section_new > div:nth-child(1) {
border-bottom: 20px solid #c54985;
border-top: 20px solid #c54985;
background:#000 url(https://picsum.photos/id/1003/600/600);
background-size: cover;
}
.photo_section_new > div:nth-child(2) {
border-bottom: 20px solid #005d99;
border-top: 20px solid #005d99;
background:#000 url(https://picsum.photos/id/103/600/600);
background-size: cover;
}
.photo_section_new > div:nth-child(3) {
display:none;
}
.photo_section_new > div:hover {
flex-grow:1.1;
}
</style>
<div class='photo_section_new'>
<div id='main_photo'>
</div>
<div id='second_photo'>
</div>
<div class='clear'></div>
</div>
Neither image should move/change position. They should each just expand over the other when they are hovered over. I'd appreciate any suggestions you might have.
You are overcomplicating a simple task. Here is an easier idea using flexbox:
.container {
display:flex;
}
.container > div {
height:200px;
border-bottom:5px solid;
flex-grow:1;
transition:0.5s;
background-size:cover;
background-position:center;
}
.container > div:first-child {
background-image:url(https://picsum.photos/id/1003/600/600)
}
.container > div:last-child {
background-image:url(https://picsum.photos/id/103/600/600)
}
.container > div:hover {
flex-grow:1.1;
}
<div class="container">
<div></div>
<div></div>
</div>
Image is not displaying in my page.
<div class="rating" style="width:25%;float:right;height:100px">
<span class="truckIcon">
<!-- <img src="../images/logo/favicon.png">
</span> -->
</div>
css:
.truckIcon{
background-image: url(../images/icons/favicon.png);no-repeat !important;
width:80px;
height:80px;
}
This is my css path: \ulmt\html\css\style.css
This is my image path: \ulmt\html\images\icons\favicon.png
Is anything wrong here?
.truckIcon is line-element so that you need to add display:inline-block for that and one more thing background-image not work with no-repeat so that you need to add background-repeat: no-repeat !important;
.truckIcon{
background-image: url(../images/icons/favicon.png);
background-repeat: no-repeat !important;
width:80px;
height:80px;
display: inline-block;
}
background-image not support no-repeat so try with this:
.truckIcon{
background: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
}
just remove the semicolon before no-repeat. The style should be
.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
}
Remove semicolon ; just before no-repeat from the image url in your CSS, like:
.truckIcon {
background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
}
Hope this helps!
span is a inline element. so you need to style display: block; or display:inline-block;
also uncomment your close span tag after img tag
.truckIcon{
background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
display:inline-block;
}
you have used span element which is an inline element. so your width and height will not be applied on it. To make it work add a property called display:inline-block;
.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
display: inline-block;
}
just simply change this CSS it would defiantly work.
.truckIcon{background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
display:inlin-block;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I try to show an image (representing a text showed vertically) on the right side of a div. As you can see on the picture below, my image is showed inside of the div. But I would like to show my image on the right side of the div (outer).
Here is my css:
.outer-gray
{
width: auto;
border: 1px solid #efefed;
border-collapse: collapse;
margin-right: 20px;
display:block;
background: transparent url('Images/framework-asp-net-mvc3.png') no-repeat bottom right;
}
Thank you.
Try this one.
<div class="container">
a lot of content
<div class="outter"></div>
</div>
<style>
.container{position:relative}
.outter{
position:absolute;
right:-10px;
bottom:0;
height:200px;
width:10px;
background:url(some.png) no-repeat
}
</style>
I need to create the following in CSS and have it work on IE7+ (and Firefox if possible):
Everything is done except the background!
The quotation is different each time, so the background needs to automatically adjust in height.
It also needs to auto adjust to the width of the container it's placed within. By this, I mean the gradient cannot stretch. The background needs to be the fade-in left gradient, then the background colour, then the fade-out right gradient.
Here's my current code - now on JSFiddle:
HTML
<div id="ehs-quotecontainer">
<div id="ehs-bgleft">
</div>
<div id="ehs-bgright">
</div>
<div class="ehs-marks" id="ehs-marktop">
“
</div>
<span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
<div class="ehs-marks" id="ehs-markbottom">
”
</div>
</div>
CSS
#ehs-quotecontainer {
padding-top:8px;
padding-bottom:8px;
background-color:#F7F8FA;
text-align:center;
}
#ehs-bgleft {
background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
height:20px;
color:#8B8C90;
font-size:5.0em;
}
#ehs-marktop {
float:left;
margin-top:-18px;
}
#ehs-markbottom {
float:right;
margin-top:-5px;
}
.ehs-quotetext {
padding-left:4px;
padding-right:4px;
color:#000;
font-size:1.1em;
font-style:italic;
}
Any ideas on how to make the background work correctly?
The easiest way to do this is to make the entire quote position:relative so that you can position things inside it, relative to the quote container.
After that what you ask is fairly easy to do:
http://jsfiddle.net/7GEah/1/
Something like this: http://www.webdevout.net/test?012&raw
<!doctype html>
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<style>
body {
background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
margin: 71px 8px 8px;
}
.quote {
border: 1px solid #dfdfdf;
position: relative;
padding: 8px 35px;
}
.quote
p {
margin: 0;
font: italic 12px sans-serif;
text-align: center;
position: relative;
z-index: 1;
}
.quote .w,
.quote .e {
position: absolute;
top: 0;
width: 75px;
height: 100%;
background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote
span {
color: #898a8e;
font: 70px/70px allerta, serif;
position: absolute;
}
.quote
.ldquo {
left: -35px;
top: -15px;
}
.quote
.rdquo {
right: -35px;
bottom: -42px;
}
</style>
</head>
<body>
<div style="width: 209px;">
<div class="quote">
<p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
<div class="w"></div>
<div class="e"></div>
</div>
</div>
</body>
</html>
Could you create a single image, with the gradient meeting in the middle? If so, you can use:
#ehs-quotecontainer {
background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}
Provided you have defined edges of your box (which it seems you have), this will always center the gradiant image on your text.
I should add, that if your image is too narrow, your background color will blend with the edges of the image rather than spread out the middle, which might not be what you're looking for.
i hate to say this but since you will be using a very small image would you not rather use the background and insert your text having your background .
so here you will :
you keep the background with the quotation marks as it is
Insert your text in a with the background that you have . And finally you can just give the text some padding . and you are ready to go .