I am looking at semantic-ui for the first time and I was wondering how to make a layout where an image takes the full screen no matter what the size of the screen is and then when you scroll down to see the other sections, the menu is fixed at the top.
To illustrate, here are some examples:
http://yootheme.com/demo/themes/wordpress/2015/gusto/?style=default
http://yootheme.com/demo/themes/wordpress/2015/venice/?style=default
http://yootheme.com/demo/themes/wordpress/2015/helios/?style=default
http://layoutnet.com.br/
http://yootheme.com/demo/themes/wordpress/2015/finch/?style=default
Go to the examples in your semantic-ui source file and open the homepage.html with your editor.
In the style tag and this :
.masthead {
background-image: url('bg.jpg') !important;
background-size: cover !important;
}
Now open the file in your browser and view the change as you wanted.
Related
when I try to import an image using css, it always distorts the image. the image on my desktop is 180px X 80px, I bring it in with css like this:
.image{
background: url(trya5.png) no-repeat 50% 70%;
}
when it appears in my browser it is like twice the size of the dimensions of the original image file. If I reduce the dimensions of the image file in half and save it in my project folder, then it fits the size I need in the browser but it looks fuzzy and loses quality. help?
So, as a newbie I'm just getting lost in what I'm trying to do:
On the webshop I need to set up for my work, we are working with a 3rd party template for Lightspeed (e-commerce platform). In this theme, we've got 3 "highlight" items. These are background images + overlapping text and button to display products.
I've set the minimum height for these ID's to 800px:
#highlight-1,#highlight-2,#highlight-3 {
min-height: 800px;
}
So far so good, everything works.
But now, on a mobile platform (yeah, you can laugh already if you want because you know whats coming don't ya?), you've guessed it: the images are WAY too big.
I would love to crop the image to (maybe about) half the size for mobile platforms in portrait mode, so the essence of the image is still retained and users don't have to swipe about a kilometer before they reach the end of the page.
The only thing I can find within the .rain and .css files I have access to is:
#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}
#highlight-2{ background: url('highlight_2_image.jpg') no-repeat;}
#highlight-3{ background: url('highlight_3_image.jpg') no-repeat;}
I can edit this ánd I have access to a custom .css editor for the template
Anyone who can help a newbie out? Thanks a bunch in advance! :)
The ideal solution is to use a media query to serve a smaller image. This cuts down on bandwidth for mobile visitors who may be using limited data, and I believe has an impact on your page ranking within Google and the like.
#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}
#media screen and (max-width: 767px) {
#highlight-1{ background: url('highlight_1_mobile_image.jpg') no-repeat;}
}
If that's not an option, you can explicitly specify size with the background-size property, or set it to cover (scaled up or down so a single instance of the image will completley cover the element with cropping if required) or contain (scaled up or down so that the element is completley filled horizontally or vertically)
My wife is using a cover page temporarily for her site - we want a different background image used on mobile than on desktop. I am a complete neophyte however have injected CSS through the Advanced settings tab for the cover page and have inserted the following:
<style>
#media screen and (max-width: 480px) {
body {
background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg');
}
}
</style>
and it does not work. What am I doing wrong? Any help someone can provide would be greatly appreciate.
I can provide the website URL if required.
You are using a 640x1136px background image for screens narrower than 480px without resizing the background. Also, your image features a large white space at the top. I think the image loads but you are only seeing the top of the image, drawing the false conclusion it doesn't load.
This should display the image on small devices:
#media (max-width: 480px) {
body {
background:
white
url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg')
no-repeat
center
/contain;
min-height: 100vh;
margin: 0;
}
}
The key is the /contain part of the background shorthand, which could also be written separately as background-size: contain;
Other possible values include:
cover (image gets cropped but covers the element),
Length (in px, em, rem, vw, cm, in etc...),
auto ( original size - also default - what you see now),
initial (reset to initial state)
inherit (apply property of parent)
I have a slider in my WP where pictures get cropped when I resize the window
Here is a picture of a slide when the website is fullscreen and besides is the same slide when I resize the window which we can see is cropped on the right:
click to open the image
(when "inspect element" I can see that element.style section that I didn't manage to find on my css files)
Then on the element inspector I edited the element.style by adding "background-position: center;" and when I resized again the window the picture did exactly what I wanted (it centered as I was resizing):
click to open the image
As I said I tried to find the css sheet where I could edit that but I learned that it could not be done that way and that I had to force the WP to update by adding css lines
I tried theses:
.animate-in[styles] {
background-position: center !important;
}
.animate-out[styles] {
background-position: center !important;
}
but didn't manage to get anything working...
Please help!
You don't find the css sheet because css was generated with javascript.
You can try :
#sequence li {
background-position: center !important;
}
Please at the very least post the url to your webpage so i can play with it. The SS is very low quality.
What you are seeing is known as an inline style, you can overwrite it with the !important tag. The element you are highlighting has an ID that you can target to over write this.
so in your child theme's stylesheet you can write
#widget-kopewidget_sequence_slider-2-sequence_slider-item-208 {
background-position:center !important;
}
This website (click) should look like this website here (click) for the most part. The first link is in BVCommerce cart, the second was the initially designed HTML and CSS. You'll notice on the first link the center content is slightly off center as well as missing the background with the shadow, which is my main issue. (The image that should be showing up is images/bg.png)
There are a few bugs with the first website but I'm really just trying to get this background to show up properly.
First website CSS: justicejewelers.com/css/styles.css
Second Website CSS: justicejewelers.rcmhosting.com/css/styles.css
First Website Image: justicejewelers.com/images/bg.png
Second Website Image: justicejewelers.rcmhosting.com/images/bg.png
UPDATE
I've combined the bar and background gif to save some heartache. But any ideas on how to get the whole center area shifted to the right properly?
I do not know about your main issue, but on the first page I would change the text inside the head. Search robots such as Google will often ignore pages with too much information in the head due to spam protection.
I believe you have something like this in the CSS:
.wrapper { background: url("images/bg2.gif") repeat-y scroll center top transparent; padding-top: 0; }
and it overrides this:
.wrapper {
background: url("../images/bg.png") repeat-y scroll center top transparent;
padding-top: 0;
}
About background error, Firebug shows no-repeat :
/BVModules/Themes/Painted%20Paper/styles/styles.css :
url("../images/bg.png") no-repeat scroll left top transparent;
Also, your #maincontent div is smaller than the width of the background image (you have no padding in the first website (1016 pixels versus 960 pixels)
I guess you should remove /BVModules/Themes/Painted%20Paper/styles/styles.css CSS link
and give a try to a helper like Firebug :)