I found that the following CSS instruction does not resize the DIV background image showing in IE9. Do you have any idea?
HTML:
<DIV id=window20 class="window smallWindow">
<STRONG>abcde</STRONG>
<BR /><BR />
</DIV>
CSS:
.window {
Z-INDEX: 20;
BORDER-BOTTOM: #346789 2px dotted;
POSITION: absolute;
BORDER-LEFT: #346789 2px dotted;
PADDING-BOTTOM: 0.5em;
PADDING-LEFT: 0.5em;
WIDTH: 14em;
PADDING-RIGHT: 0.5em;
FONT-FAMILY: helvetica;
HEIGHT: 4em;
COLOR: white;
FONT-SIZE: 1.0em;
BORDER-TOP: #346789 2px dotted;
BORDER-RIGHT: #346789 2px dotted;
PADDING-TOP: 0.5em;
border-radius: 0.6em;
-moz-border-radius: 0.6em
}
.smallWindow1 {
BACKGROUND-COLOR: #558822
}
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: auto;
background-origin: content-box;
}
Try This
CSS
#window20 {
TOP: 10em;
LEFT: 8em;
WIDTH: 8em;
HEIGHT: 4em;
background-image :url(../image/interface_system.png);
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
}
IE9 does support background-size, but the problem in your example is that you have background-size: auto, which means not to stretch the background! (Which is the default if you don't specify the property.)
Solution: use 100% 100% or cover or contain, depending on your needs.
See https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I would have made a fiddle, but I don't have your background picture, and besides, the div in your example doesn't move, so it would not have been very illustrative.
Related
I have a block (container) with gradient as background color. The container have a border, and inside it, i have a text that I want to overflow part of a border and have the same background color. Now I have something like this:
But I want to achieve something like this:
To overflow some border area but still having the gradient background color, because if I add background color to the block of text, it still different from the gradient effect.
EDIT: I'd like to achieve something like this:
According to your JSFiddle code, I think the following code will help you.
.gradient-box {
background-image: linear-gradient(white, grey);
display: inline-block;
padding: 10px;
}
.container {
margin-top: 10px;
border: 3px solid black;
text-align: center;
display: inline-block;
padding: 10px;
}
.text {
margin-top:-20px;
}
.highlight {
background-color: #a9b0a9;
color: #429778;
}
<div class="gradient-box">
<div class="container">
<div class="text"> <span class="highlight"> TEXT </span></div>
</div>
</div>
You're wanting something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: #FBBFBF;
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: #FBBFBF;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #FBBFBF;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
EDIT: With transparent BG. Think this is only possible with square borders...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-image: linear-gradient(to right, red 0%, orange 100%);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
position: relative;
border-top: 0;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.top-border {
width: calc(100% - 100px);
height: 2px;
background-color: black;
position: absolute;
top: -1px;
left: -1px;
}
.top-border-end {
width: 20px;
height: 2px;
background-color: black;
position: absolute;
top: -1px;
right: -1px;
}
.float-text {
width: 80px;
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: transparent;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
text-align: center;
}
<div class="container">
<div class="top-border"></div>
<div class="float-text">
Text
</div>
<div class="top-border-end"></div>
</div>
I would do it like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: rgba(255,0,0,0.25);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: purple;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #fff2ac;
background-image: linear-gradient(to right, red 0%, orange 100%); /* maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
Edit
You mention a gradient, maybe you mean like this? (I added the gradient behind the the text box). If not - remove the background-image gradient if you just want solid colour.
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
I need to add padding to a class with a background image. However, when I do so, the padding isn't added to the background image, just the anchor. What am I doing wrong? Here's my CSS:
.heart {
width:200px;
height:18px;
background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
padding-left: 20px;
display:block;
}
Try using margin-left: 20px; instead.
Margin is outside the container and padding is inside the container, so padding won't move the background of the container.
Background can show based on background-origin: content-box;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background: url('https://via.placeholder.com/50x100') left center repeat-y;
padding-left: 20px;
display: block;
background-origin: content-box;
}
<div class="container">
<div class="heart">x</div>
</div>
or
Another solution is background-position-x: 20px;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background-image: url('https://via.placeholder.com/50x100');
padding-left: 20px;
display: block;
background-position-x: 20px;
background-repeat: repeat-y
}
<div class="container">
<div class="heart">x</div>
</div>
This question already has answers here:
div set height equal
(4 answers)
Closed 8 years ago.
this is my html of my little game.
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
<p>When you are ready, click on <strong>Fight</strong>.</p>
<button id="resulot" onClick="resulte()">Fight!</button>
</div>
<div id="clear"></div>
</div>
And this is my CSS
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
#rock {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/rock.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#paper {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/paper.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#scissors {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/scissors.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#result {
background-color: #ECECEC;
border:2px solid gray;
border-radius:25px;
width: 200px;
height: 100px;
}
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float: left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
display: block;
overflow: auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100%;
float: right;
}
#clear {
clear: both;
}
You can check it out here on http://jsfiddle.net/RWfhQ/ . I want to make the blue div to be same size as the red one. I want to make them same size. It's possible that blue div may get bigger than red one, so I need to have them same size.
Thank you very much.
The obvious solution is to use position: relative on #game container and position: absolute on #confirm:
#confirm {
...
position: absolute; // <-- stretch the div
top: 0;
bottom: 0;
right: 0;
}
In this case you don't need height: 100% and float: right anymore.
http://jsfiddle.net/RWfhQ/1/
Since this is a fixed width, you could use the faux-columns trick. Wrap both in a <div> to handle the background, and use a background image which is half blue and half red.