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.
Related
The problem is quite simple and yet it's hard for me to get the solution.
This is the page that I have developed from the course.
When I use developer mode and try to decrease the screen size. The background color of the div (which has a classed named ".section-hero) does not stretch to the end.
Here is the code.
The following one is the HTML section where
.section-hero is the one that has the background color and it does not stretch to the end. And I want that stretched thing to happen in response to the changing screen size.
This one is CSS
And I have also include on my header in HTML.
It would be very nice of you if you could help me on this one.
You can try this under .section-hero in CSS
background-size: cover;
Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Try putting this under .section-hero in CSS
background-size: cover;
I have posted a video screen grab of my issue here: http://whataprettyface.ca/datastellarissue.html
I have a single-page site with a dynamic vertical height that expands when certain sections are called upon. If the user calls a photo gallery from the portfolio section, the parallax effect is pushed down, revealing a large section of the background of its parent container. As the video illustrates, this is only an issue after vertically expanding the page by opening the portfolio images.
The background image cannot be repeated and I do not wish to use a white backup workaround. I also don't want to set a fixed height to the expandable section. I would, however, like to keep this parallax effect.
I did find a similar issue on here but it had never really been answered.
I am using Stellar.js v0.6.2 and have thrown up an unminified version on my site for ease of viewing: http://whataprettyface.ca/js/jquery.stellar.js
The CSS for the container looks like this:
.contactbackground {
position: relative;
background-image:url(../images/index/contact_background.jpg);
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
Any help is greatly appreciated!
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.
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