You can use a background image .application-title img { width:200px; height:200px; box-sizing:border-box; padding-left: 200px; /*width of the image*/ background: url(http://lorempixel.com/200/200/city/2) left top no-repeat; } <div class=”application-title”> <img src=”http://lorempixel.com/200/200/city/1/”> </div><br /> Original Image: <br /> <img src=”http://lorempixel.com/200/200/city/1/”>
For max-width to work correctly, your element first needs a certain width. Use 100% to achieve what you want. See here: http://jsfiddle.net/QsHa9/
You have to import the image as the following, using the relative path. import React from ‘react’; import Paper from ‘material-ui/Paper’; import IconButton from ‘material-ui/IconButton’; import ActionHome from ‘material-ui/svg-icons/action/home’; import Image from ‘../img/main.jpg’; // Import using relative path const styles = { paperContainer: { backgroundImage: `url(${Image})` } }; export default class Home extends React.Component{ render(){ … Read more
To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit. In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for … Read more
You cannot style generated content without defining what that content should be. If you don’t really need any content, just an extra “invisible element” to style, you can set it to the empty string (content: ”) and just style that. It’s easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/ By the way, the snippet you posted is … Read more
To select strong elements that are descendants of an element with class commandBar, use the descendant combinator along with a class selector: .commandBar strong In order to only select direct children strong elements, use the child combinator, >: .commandBar > strong Depending on your markup, you may also want to specify the element type that … Read more
In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute. The difference is that a browser may have other ways of determining the language of a given element when testing against the :lang() pseudo-class which may be defined by the document language and/or the implementation, whereas … Read more
You probably don’t want to change the button’s :active state but the default and the :hover state. The following sets the button color to #fff and the backgroundColor to #3c52b2 and switch them on :hover. I’m not sure how you applied the updated styles (or how you tried to override the default styles), I created … Read more
As to why, no idea. A reset will most certainly fix this: ul { margin: 0; padding: 0; }