I have a word with a background colour. This is fine except that I want the background color a certain size in relation to the word. Simply putting background-color: blue,gives the word a background color and display: inline-block makes the color fit the word exactly. So far so good. The problem is as soon as I increase the font size, the background colour shape warps and either goes into a square covering half the word or goes into a line covering the width but not the height.
#media (min-width: 768px) {
.about5 {
color: red;
background-color: blue;
display: inline-block;
position: relative;
font-size: 90px;
left: 320px;
font-weight: bolder;
transform: rotate(90deg);
bottom: 100px;
z-index: 3 !important;
}
}
<div class="about5">About</div>
This gives a background colour of blue which covers half the word but not the other half.
So how do I get it to cover the whole word and fit exactly, even to perhaps add a bit of padding?
Can I just apply width and height or is there another way?
Thanks.
The page is here and it differs according to desktop mobile.
I inspected the element on your site and saw that your about5 class has the attributes of width and height both set to 100px. Either you specified those dimensions or they were inherited from a parent element. Get rid of your height element only, then change width to auto and add padding: 3%. That's what ended up working for me in the Inspector for your site, although the code works just fine for me in this JSFiddle: https://jsfiddle.net/z0keyftb/
Related
I have a background image with a square which has the same size as a div that is covering this square. (There is a god reason for this not mentioned here). When centering this background image and the div, they do not overlap on certain browser width's. When re-sizing the browser, sometimes the background square is misaligned by 1 pixel. As you can see in the example below and in the JSFiddle, 1 pixel of the background square is visible sometimes when dragging the width of the browser.
Is there a solution for this? Why is the positioning between the elements not synced?
Try to re-size the fiddle-view-port width and you will see that the cyan background-square sometimes is visible when the misalignment occur.
JSFiddle: http://jsfiddle.net/jj3qxL3k/
Code:
<div>CONTENT DIV</div>
CSS
div{
background-color: yellow;
width: 800px;
margin: 0 auto;
}
html{
background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
Tried this without any luck:
/* Fix form centering background input chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
By the way... This happens for me in Chrome Version 43.0.2357.81 m.
This depends on how the browser handles uneven values and aligns backgrounds and content.
This happens when your container has an odd width value since your element inside the container has an even width value. For example if your element is 800px wide and the container is 855px wide then there would be 855-800 = 55px of space left around your element and now the browser has to divide that for the two sides. It would come down to 22.5 pixels per side but since it can't paint half a pixel it has to round the number. So one side of the element would get 23px and the other side 22px.
Now it could be argued that the background image itself is treated the same way so the alignment should be the same, but in fact this is solely up to how the browser is built so that's why you are getting different results in different browsers.
It's rather hard to suggest a workaround without seeing the actual project since it would probably have to be a different solution all together.
I am learning CSS and made up a problem for myself. I hope to get some help from CSS masters here :)
This is what I am trying to accomplish: A div with some text inside and a background image. Div's width is 100% of it's parent and height depends on text content. The background image should fill the div and have the minimum possible dimensions. Tried to search for answers but haven't found any.
The application of this could be for example a slider, a hero shot or a title with a responsive background and other responsive design applications.
Question
How to make responsive background image for div with constrained proportions without CSS3 "background-size" feature and without JS? The div's width is 100% and height depends on it's text content. Background image dimensions should equal either div's height or width as shown on illustration (i.e. image should have smallest possible dimensions).
Is this possible to accomplish at all? Or do I need to use some extra techniques to do this? For example extra #meadia queries with different different images (different dimension) or something else?
Illustration
Here is the illustration of how everything should behave:
Illustration
Requirements
The requirements I'm trying to achieve is No "background-size" and No JavaScript. This is for more browser compatibility. The CSS3 background-size:cover does the job almost. Very close. But it isn't compatible with older browsers. The structure is not prescribed. Text and images can be wrapped in any number of divs if needed.
Attempts
I've tried to accomplish the task with the following code:
jsfiddle
The code seems to work ok with smaller images but not with larger images. This presents one of two problems: 1) too low resolution (with small images) OR 2) it isn't clear what the image is about (for larger images).
I haven't used overflow:hidden to make the effect visible.
<div class="box">
<img class="img img11" src="image.jpg" alt="" />
<h1>Some text here</h1>
</div>
And the CSS:
* {
padding: 0px;
margin: 0px;
}
h1 { font: 600 20pt Arial; }
.box {
position: relative;
border: 1px solid black;
width: 100%;
min-height: 70px;
}
.img {
position: absolute;
top: 0px; /* Position it in top left corner */
left: 0px;
z-index: -1; /* Put it behind the text */
border: 2px dashed red;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
What are your closes't solutions? Hope the question is clear enough and isn't too long. Thanks for your replies!
I want to achieve a menu bar whose background extends to the length of the browser window, while the actual menu is centered in the middle. I have the following CSS code to achieve this:
.menuContainer {
position: relative;
height: 60px;
width: 100%;
margin-top: 60px;
padding: 0px;
z-index: 2;
background-color: white;
}
.menuContent {
position: relative;
width: 1000px;
height: 40px;
top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Verdana, Sans-Serif;
color: black;
font-size: 12px;
}
This solution works fine in all major web browsers, but when I view it on iPad, the right-side of the container gets cut off at about 3/4 of the browser window. What is interesting is that, if I change the position of the container to 'fixed,' it works just fine, but unfortunately that is not what I need. I need this menu to scroll with the page's content.
Any idea what I did wrong?
UPDATE 1.:
I think I am zeroing in on the problem. After trying all your suggestions, including getting rid of the inner div, as well as playing with the width, I realized what the problem might be:
The container automatically inherits the width of the browser window, which on iPad is around 1000 pixels. But I have elements on the webpage that are wider than that, stretching the content area above a 1000 pixels. So, while the content of the webpage is stretching just fine, the 100% width element remains the width of the original browser window at about 1000 pixels and do not updates automatically like it does on desktop browsers. what baffles me, however, is why isn't 'fixed' positioning affected by this? I am trying to use min-width at the moment to fix this problem.
I hate to answer my own questions, but the problem was what I described in my update. Basically the 100% width does not update automatically on mobile browsers, meaning that, if an element is wider than the default width of the browser, 100% width elements will be cut off. I solved this by adding:
min-width: 1200px;
where the 1200px is the width of the widest element on my page.
Remove the fixed width value in .menuContainer
FIDDLE
To start things off, here is my code:
.header{
width: 100%;
height: 10%;
background-color: #FF4545;
}
.headertext{
font-family: 'Duru Sans', sans-serif;
font-size: 65px;
float:left;
margin-top: 0px;
margin-bottom: 0px;
}
.headermenu{
font-family: 'Duru Sans', sans-serif;
font-size: 65px;
float: right;
margin-top: 0px;
margin-bottom: 0px;
}
So both the .headertext and the .headermenu are html p statements that are embedded within the .header div. Now, the .header div has a bg color. When I resize my window, the div resizes (very clearly with the bg color) however the text does not resize. It makes sense that the text doesn't resize given that I have assigned a concrete font size for them. I wanted to ask how I can have the font size dynamically scale so that the text is always kept within the div? At this point it pokes out the bottom when you resize, meaning half the text is within the bg colored div and half of it is sticking out into whitespace. I hope this is clear enough, thanks!
Try to use change it like this:
1) Add "font-size: 65px;" to the class ".header"
2) Replace the definition of font-size in the class ".headertext" and ".headermenu" by "font-size: 1em;"
Thus, the child will get the same size of the parent node. Therefore, when the parent is resized, the children nodes will be resized too.
Defining your font size in pixels makes them definite sizes instead of something that will scale well with a fluid layout. Define your fonts in em instead of pixels. To find the proper em size you divide the font size by 16 which is the standard font size for browsers. For instance, your font size of 65 pixels would become 4.0625em (65 / 16 = 4.0625).
I think there is no CSS way to make font-size smoothly scale on window resize.
You might try CSS Media Query too set font-size relative to specific widths/heights
See example: http://jsfiddle.net/Ww4hB/
Otherwise, you need JavaScript to update font size on page load and window resize.
edit:
There is also something called viewport unit, but it isn't supported in all browsers.
See more: http://css-tricks.com/viewport-sized-typography/
I have attached an image to my issue, what's happening is that Firefox gives my image an extra extension, where the entire thing works fine on Google Chrome, without the silly bottom image part. The image is set as part of a style, as a background image and the gray bit is defined with a table.
http://s8.postimage.org/rc26rtbr7/profile.png
Here's the style code...
div.frontpage_title {
padding: 5px;
font-weight: bold;
font-size: 12px;
background-image: url(../images/frontpage_tab.png);
color: #fff;
}
Thanks and regards.
Set the hight of the div.
If the image is 20px high do,
height:10px; /* 20px-5px-px (padding top and bottom) */
Stop the background repeating use:
background-repeat: no-repeat;
This will stop the image repeating, read more here
I would guess that your title div has no set height. This would mean that depending on how the browser renders the text, the height of the div would vary slightly. You could fix this by setting a height on your div:
div.frontpage_title {
height: 14px; // Set div height
line-height: 14px; // Optional, will vertically center text
padding: 5px;
font-weight: bold;
font-size: 12px;
background-image: url(../images/frontpage_tab.png);
color: #fff;
}
The "silly bottom image part" is your background repeating due to the extra height. Your total height needs to match the height of the tab image.
Another option would be to make your tab image taller, by say 10px. Then, if your tab is ever a little taller (<10px), you won't see the repeat. You could set background-repeat to none, but this will simply mean you will have a gap instead of the repeating image.