Is there any way to achieve the effect of background-size:cover whilst filling up the area behind the border as well. To illustrate this better take a look at the image below: the left image is using background-size:cover and neatly fills up the entire box itself regardless of whether the image is portrait or landscape, but is hidden behind the semi transparent top and bottom borders. The second image is created using a background-size: auto 260px rule which gives exactly the effect I want, however only works because I know that the background in this case is landscape (and that the box itself is 200px and the border 30px).
A JSFiddle which is used to render the above two boxes can be found here. I have a hard time believing this is not possible with pure css, but even open for javascript based solutions otherwise (although I could build a hackish Javascript solution I have no idea how to make on look relatively clean...). Still hoping there is a CSS way to do this though.
This can be achieved by setting the background-origin property to border-box:
#one{
background-size:cover;
background-origin: border-box;
}
fiddle
There is also a background-clip property, which sounds like it should do that, but doesn't — since the background by default extends under the border, the question is rather why background-size:cover/contain/% don't take the border into account. Backwards compatability, I suppose.
Related
I'd like to use Parallax.js for a project, but so far I've had trouble getting it to play nice with an existing site.
Here's where I'm getting hung up:
I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px
Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?
So far, I haven't been able to "see" anything. The documentation mentions making the target div transparent, but I've had no luck
Codepen Example I'm trying to emulate: Simple Parallax Scrolling parallax.js
My Codepen: Existing site, want to add parallax to #hero
CSS I used to achieve a "simple" fixed BG effect
#hero {
background-image: url("http://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: overlay;
background-position: 0 0;
background-attachment: fixed;
}
Any advice/suggestions/constructive criticism is welcome! Already spent an embarrasing amount of time pulling my hair out over this.
I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px
Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?
Have you tried wrapping your #hero and applying parallax to the parent? So that the inner bock is left alone by the parallax script (while being moved by its parent)?
Scripts like sliders or parallax, etc. work by automating the application of the needed CSS rules to an element, as you found out. When this happens and it conflicts with your CSS, dodge the fight and move your content away from the effect of the script's style rules.
In other words give the script a wrapper to work on, and keep the content for yourself, away from the greedy tentacles of the script that's giving you nightmares.
Im trying to use css3 scale property, but im facing issues with alignment of preceding elements
I see lots of spacing created after an element is scaled using css3.
Trying to place an images and titles beside it for a list. But when image is scaled the tile is pushed down. don't want to use absolute as it may give bad impact in different devices and page re-size
Here is the fiddle http://jsfiddle.net/sonymax46/xhwcvmj8
Also can you elaborate why this is happening
Can some one help me out.
Instead of scale through the transform property, adapt the width and height of the element to the desire size. If you don't do so, the element is going to keep the original size, resulting in that blank space.
Then you can set correctly the image size using this CSS:
background-size: contain;
background-repeat: no-repeat;
Here you have your jsfiddle updated.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I am working on Html and Css. I am trying to design a chart conversation like web page where i need to show the messages alternatively like one comes right another on left similar in mobile applications. For that i am using divs to contains the message and i set a background-image for it,
Here what the problem i am facing is, message are of variable size that means some may occupy 1 line and some other might 5 to 20 lines we cannot estimate it. Div background-image size is 40px height only so if i got more than 3 lines of message then it crosses the background image. Here is my Div markup
<div style="background-image:url('some url');padding:10px;margin:2%;word-break:break-word;width:100px;max-width:10px">Here is my content it is variable in size</div>
I have used the css properties like overflow:hidden but it didn't help me. Is there any way so that image or div will be automatically resized based on the content size vertically. Or other way i can follow that is closely related to my requirement. Please guide me.
You could make use of the CSS property background-size but it won't be supported in old browsers (mainly IE<9 which might not be a problem):
background-size: cover;
Or
background-size: 100% 100%; /*x and y*/
Or you can try to use jQuery to deal with it.
I would recommend you to take a look at: Perfect Full Page Background Image
Anyway, the image will get distorted and might not look very good. What usually is done in these cases is splitting the image in 3. Top, middel and bottom,so the middle image can be repeated on the Y axis.
But, you will still having problems with the graduated background, which you might want to use as another background image or rather with CSS3...
My advice: less is more. Make things easier. Take a look around in other sites and see how they try to avoid complex images. If possible, deal only with CSS, avoid requests, speed up your site and bring the new minimalist style to your site.
Here is a possible solution:
Just split it up into 3 divs.
see here
It works with splitting the image into three parts:
- Top
- Middle
- Bottom
But you should really consider building chat bubbles by using only HTML and CSS as it improves performance and lessens network requests.
You can use "background-size":
background-size: cover;
Read more:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Yet I don't recommend this. You better split your image to two image and use two div.
You may use jquery dotdotdot plugin and shrink the content of a div to a specific height and width so that it appears nicer..
You have an option to show the remaining content with a link at the end of your content allocated for the div and show the left over content may be in a popup or something you may want..
Browser support isn't as good as background-size (to my knowledge), but this seems like a case for border-image.
The image you're already using as background should split fairly well and this will let the div scale without causing the left and right edges of the speech bubble to stretch in the same way they would if the background image is just stretched to fit.
More info: http://css-tricks.com/understanding-border-image/
background-size: 100;
or
background-size: cover;
are the CSS solutions. If this does not fit your needs, then you can use jQuery's getWidth, getHeight, setWidth and setHeight functions.
Here's a working fiddle using background-size: 100% 100%;
By adding a couple of <br>'s after your message, you can compensate for the pointer to the bubble in your image.
You have loads of sites with chat bubbles made only with CSS.
Here are some examples:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://www.sitepoint.com/pure-css3-speech-bubbles/
http://www.ilikepixels.co.uk/drop/bubbler/
http://html-generator.weebly.com/css-speech-bubble-generator.html
If you have any doubt after viewing those, please ask us about it :)
Friend,
Try add this property in the element:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Because you set 100% of width but add to paddings and margins.
See if this working...
I am making a chessboard in javascript. The chessboard's squares (buttons) were originally designed to be 60px by 60px, but now they are 40px by 40px.
button
{
width:40px;
height:40px;
border: 0
}
However, some of the pieces that were designed for this earlier chessboard are still 60px by 60px. Is there any way in Javascript to make the images shrink proportionally to fit the square size? Currently, the images fit the square size, but do not shrink, so when I say,
square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.
I get pieces like this -
If the WhiteKing.jpg had shrunk proportionally, it would have fit nicely. Is there a way to do this in Javascript? Any help would be really appreciated.
Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:
button{
width:40px;
height:40px;
border: 0;
background-size: 100%; /* To fill the dimensions of container (button), or */
background-size: 40px auto; /* to specify dimensions explicitly */
}
Of course you can use that in JavaScript too (but it's better to add it to already existing CSS for button):
square.style.backgroundSize = '100%';
Your going to want to use:
Background-size: 100%;
There are different options for how to do this, but if it was me, I'd physically resize the actual image files to maintain optimal control over the image quality. If there are a lot of files, and this would be time consuming to do in Photoshop (or whatever image editor you use), then use your favourite scripting language paired with something like ImageMagick and let the computer do what it does best ;)
CSS
Use CSS3 background-size as mentioned by Juicy Scripter. Note that background-size is, however, a newer CSS attribute which won't work in older browsers (like < IE 8) and may require vendor prefixes in other browsers.
MDN: background-size
CSS3.info: background-size
W3: background-size
HTML
Load the chess piece image with an actual img tag and change the width of that html element (downside is this will probably cause reflows that might slow down page rendering or cause flickering or other undesirable weirdness). You'll probably need to use different positioning techniques (like position, z-index, etc.) depending on your implementation.
Manual
Just make the images physically smaller. I think this is, in the end, the best (albeit the most time-consuming) option as it will allow you to retain maximum control over the quality of the images. Different browsers may unpredictably resize the images in different ways (depending on how they handle resizing), whereas if you resize them yourself, you're guaranteed that the images are presented in the way you intend.
Perhaps try adding position:relative and background-color:transparent to the button's style, then use a div inside the button tag setting the top and left to 0px. Inside this div please a tag for the button graphic with the style set to the new width/height (40px).
Might not need to use absolute position for the graphic if you don't want to put anything on top of it. If you do, use z-index on the div to move it behind any text, etc...
Give that a go. Hope it works! :D