I'm using Galleria and trying to utilize just the thumbs and lightbox sections, so that i don't have a large image on the page. I'm looked at cmotion as an alternative but dont like the way it doesn't automatically adjust the thumb dimensions to fit the image. I was hoping i could add some code to only call the thumb part of the gallery? any thoughts? Thanks
The generated divs concerned are nested as follows:
<div class="galleria-container">
<div class="galleria-stage">
...main image here...
</div>
<div class="galleria-thumbnails-container">
...thumbnails here...
</div>
</div>
.galleria-stage must have a proper height or the image gallery will fail but you can stop it from displaying with display:none. However, both .galleria-stage and .galleria-thumbnails-container are absolutely positioned to sit one on top of the other, so you will still have an empty space where the main image should be.
css with !important provides a quick fix by overwriting the positions so they are both aligned to the top, one on top of the other.
.galleria-stage { display: none; }
.galleria-stage, .galleria-thumbnails-container {
height: 200px !important; //thumb height
top: 0px !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
}
.galleria-thumbnails-container { z-index: 2 !important; }
Change height to your thumb height and change 0px if you want padding around your images.
Related
<div style={{textAlign:'center !important',margin:'0 auto !important'}}>
<img className="lazy" src={require("../images/dragonfire.jpg")} style={{display:'block !important', margin:'auto !important', position:'absolute', left:'0',right:'0',top:'0',bottom:'0',height:'40em',width:'40em'}}/>
</div>
I have looked through a lot of posts here and external sites as well on this topic and it seems that nothing is working. I have a big image that I just want it to be centered in the screen view. The div is a background for the banner on a page. I can get it to the right size but it just shows the left half of the image, I cannot get it to center and just cut off the left and right sides depending on the sides of the screen.
Try removing:
left:'0',right:'0',top:'0',bottom:'0'
This is fixing the position of your image to the top-left corner.
Also as #Daniel has mentioned in the comments, change the position:absolute to relative since it restricts the flow of the content inside the div.
Here is the working model:
div{
background: red; /*Just for clarrification case*/
textAlign: center !important;
margin: 0 auto !important;
}
img{
display: block !important;
margin: auto !important;
position: relative;
height: 100px;
width:100px;
}
<div>
<img className="lazy" src="http://mxtrianz.me/wp-content/uploads/2017/05/small-pictures-20-the-data-lab.jpg"/>
</div>
P.S. Comment on your code: Please try using external or internal styling and refuse using inline styling as it reduces the readability of your code.
have a site I am working on wordpress twenty twelve theme; and on a page want to have three background images; one at top, next one right below top one; and then third one at very bottom…
is there anything i can put in "background position" that will make the second image right below the first? here is what I have:
{background-position: top, ???, bottom;}
so I am looking for what to put where the ??? is to make the second image right below the first, can anyone help?
thanks, G
Make 3 content divs, and set them to no margin and the exact height.
I'm not putting exact code, because I don't know what your height are or image name, but use something like:
.Class{
background-image: foo.jpeg;
height: 500px;
margin: 0px 0px 0px 0px;
}
.Class2{
background-image: foo2.jpeg;
height: 700px;
margin: 0px 0px 0px 0px;
}
HTML:
<div class="Class">Text</div>
<div class="Class2">Text bottom</div>
You can also set the z-index to -100 and put other divs on top of these, float left, etc.
I'm redesigning my website and I want to apply an inner shadow to the background image. What is the best way to do this for a website?
I thought about applying a shadow in PS and then setting the background image to match the edge, but it never looks well around the edges.
My second idea was to apply a CSS box-shadow to the body tag, box-shadow:inset 0 0 100px #000;, but I know that box-shadows slow down the website rendering wise.
What would the be the best way to do this?
For reference, here are the two background images, the one without a shadow and with one.
- http://i.imgur.com/8Wzj8l.png
- http://i.imgur.com/StVpOl.png
I was able to fix it by using this code,
.overlay{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow-y:scroll;
box-shadow: inset 0 0 100px #000;
}
And my HTML looks like,
<body>
<div class="overlay">
Stuff...
</div>
</body>
The only problem with that is that without the position:fixed it would not be 100%, only 100% of the viewport. Making it fixed however, made it cover everything but you couldn't scroll, so adding overflow-y:scroll allows it to then scroll.
I have a site design that uses background images and textures as a feature of the site.
See background design concept here: http://www.flickr.com/photos/54233587#N03/6145240784/in/photostream
The background is intended to work like this:
The page background has a tiled pattern (or on some pages there will be solid background colour).
The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position - that is, it should move with the page if it is scrolled.
All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.
I have tried to achieve this by targeting the HTML5 html node for the tiled background.
html {
background: url(../img/pegboard.jpg) repeat center;
}
Then, for the overlaying background image I've been using a div element to insert an image.
<div id="bgimage"><img src="mybgimage.jpb"></div>
Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.
Thanks.
I would do something like this.
HTML:
<div id="bgimage"></div>
<div id="content">
Actual content goes here.
</div>
CSS:
body {
background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
position: absolute;
top: 0;
left: 0;
right: 0;
background: url(../img/mybgimage.jpg) no-repeat center;
height: 400px;
box-shadow: 0 5px 5px -5px #000;
}
#content{
margin: 0 auto;
width: 960px;
height: 1000px;
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}
I've been trying to do something extremely simple, yet I can't make it work!
Here's what I'm trying:
---margin top: 15 px
---VARIABLE HEIGHT DIV (imagine a box-like element)
---margin bottom: 15px
I basically want the box to resize based on the browser window height.
Here's what I've been trying:
CSS
body {
background-color: #D0CDC5;
height:100%
}
#info_box {
background-color: rgba(40,40,40,0.5);
border: rgba(34,34,34,0.9) 1px solid;
width: 350px;
height: 100%;
margin: 15px 0px 15px 20px;
}
#info_box p {
color: red;
}
HTML
<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>
By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?
Thanks a lot guys,
**EDIT
See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challenge
Thanks to #Hristo!
UPDATE
Check out the fiddle...
Edit, Full Screen
Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/
I hope this helps.
Hristo
if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:
#info_box {
position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;
}
alternatively, you could make #info_box stretch the full height, and put a position: absolute div into it with the same data as above.
I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.
Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.
But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.
Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.
If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.
I have done this dynamically using jQuery.